鍍金池/ 問(wèn)答/HTML/ 關(guān)于動(dòng)態(tài)加載的dom,change事件綁定無(wú)效的問(wèn)題

關(guān)于動(dòng)態(tài)加載的dom,change事件綁定無(wú)效的問(wèn)題

JS中的無(wú)效事件如下

$("td").on("change","select.weekdays",function(){
    console.log("hello,world");
});

動(dòng)態(tài)加載的dom如下

<div class="modal-body">
    <table class="table">
        <tbody>
        <tr>
            <td class="col-md-3">預(yù)約日期:</td>
            <td>
                <select name="weekdays" type="text" class="form-control weekdays">
                    <option value="0">今天 12-28</option>
                    <option value="1">明天 12-29</option>
                    <option value="2">后天 12-30</option>
                    <option value="3">周日 12-31</option>
                    <option value="4">周一 01-01</option>
                    <option value="5">周二 01-02</option>
                    <option value="6">周三 01-03</option>
                </select>
            </td>
        </tr>
    </tbody>
    </table>
</div>

控制臺(tái)不能輸出hello,world


把JS的寫(xiě)法改一下

$("div.modal-body").on("change","select.weekdays",function(){
    console.log("hello,world");
});

控制臺(tái)可以輸出hello,world


問(wèn):tddiv.modal-body同樣是select.weekdays的父元素,為何前者無(wú)效,后者有效?

回答
編輯回答
玩控

你的代碼不完整,不知道具體是怎么動(dòng)態(tài)加載的,有可能你執(zhí)行

$("td").on("change","select.weekdays",function(){
    console.log("hello,world");
});

時(shí),td元素都還不存在,所以實(shí)際上沒(méi)有綁定上。

2017年11月13日 12:47
編輯回答
尕筱澄

你的整個(gè) div.modal-body 是動(dòng)態(tài)加載的,還是只有 td 是動(dòng)態(tài)加載的?
如果是后者,你就不能讓 td 代理了吧

2018年8月16日 09:38