featherlight 抓不到 input box 的 value

前幾天設計師妹妹包了一個 lightbox 特效

拿來彈出一個視窗

讓客戶訂閱電子報

套好效果以後

換我要套 php

結果呢 遇到一個很神奇的問題

就是我抓不到 彈出來的 input box 的文字






實際的 Code 長這樣

<li>
<a href="javascript:void(0)" data-featherlight="#subscribeBox" data-featherlight-closeOnEsc=true data-featherlight-persist=true>電子報訂閱</a>
</li>

<!-- subscribe popout -->
<div id="subscribeBox" class="well lightbox">
<div class="form">
<h3 class="text-center">訂閱電子報</h3>
<div class="form-group">
<input type="email" class="form-control" value="" name="subscribe_email" placeholder="E-mail">
</div>
<div class="form-group">
<a href="javascript:subscribe_edm()" class="btn btn-main btn-block">送出</a>
</div>
</div>
</div>

我做了一個非常小的測試

我把 input box 搬出 lightbox 外面

就抓的到 內容

但搬進去就抓不到

所以我很確定是這套 featherlight 的 lightbox 動了什麼手腳

查了一下 google

發現他是複製了我要 lightbox 的那個區塊的 DOM

所以元件的 ID 重複 所以就抓不到

(事實上用其他 select 也是抓不到 因為元件變成兩份 怎麼 select 都會抓到兩個)

解法是在要 lightbox 的元件上 加上這個屬性

data-featherlight-persist=true


這樣 featherlight 就不會把 DOM 複製兩份

只會用你原本寫的那份

這樣就可以順利抓到你要的資料了