Question

jQuery('#sbox-window').on('change', '#filter-by-site', function(){
    console.log(jQuery(this).val());
    console.log('change');
});


<div id="sbox-window">
    <div id="sbox-content">
        <p>
            <select id="filter-by-site">
                <option value="null">Filter cameras by site</option>
                <option value="1">Site 1</option>
                <option value="2">Site 2</option>
                <option value="3">Site 3</option>
            </select>
        </p>
    </div>
</div>

什么都没发生......弃用live()一切正常。哪里有问题？

Answer 1

实际上这很有效。是否有可能将事件附加到作为Jquery模板一部分的“sbox-window”或者动态生成div的其他方法？根据实现情况，“sbox-window”div在文档中不存在，准备就绪，因此您需要冒泡到更高的Dom-Object ---文档的最坏情况...但我不会建议......这也是“活”的原因。

Answer 2

使用：

jQuery(document).on('change', '#sbox-window #filter-by-site', function(){
    console.log(jQuery(this).val());
    console.log('change');
});

因为当你执行jQuery('#sbox-window')时，还没有这样的元素（因为DOM按顺序构造，你将块定义得更低），所以你为空数组元素调用on方法，当然还有没有效果。

如前所述，还有另一种选择：

$(document).ready(function() {
   $('#sbox-window').on('change', '#filter-by-site', function(){
       console.log($(this).val());
       console.log('change');
   });
});

Answer 3

它适用于我：

DEMO

jQuery 1.7版中添加了on()方法。请确保你已经包含了一个足够新的jQuery版本。

Answer 4

也许在您使用委托时，#sbox-window尚未在DOM中。将其包装在准备好的回调函数中：

$(function(){
   jQuery('#sbox-window').on('change', '#filter-by-site', function(){
       console.log(jQuery(this).val());
       console.log('change');
   });
});

.live（）使用document作为委托。

Answer 5

它工作正常，看到working example，所以你似乎缺少它在DOM就绪处理程序上执行你的查询代码。

$(document).ready(function() {
   $('#sbox-window').on('change', '#filter-by-site', function(){
       console.log($(this).val());
       console.log('change');
   });
});

Answer 6

你可以在元素上使用$ .bind。

或者，更好的是，你可以在不使用jquery的情况下完成：

document.querySelector('#filter-by-site').addEventListener('change', changeHandler);

function changeHandler(e) {
    console.log('change');
}

Answer 7

你也可以这样使用：

jQuery(document).on('change', '#filter-by-site', function(){
   console.log(jQuery(this).val());
   console.log('change');
});

Answer 8

使用最新版本的jquery库，其工作正常

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

如何正确使用方法？

8 个答案: