如何根据元素的class设置一个全局监听事件

rockman
  • 168

问题:

在输入过程中做了一个异步搜索,并将搜索结果放在下面的一个ul列表中,想实现点击搜索结果自动把值填充到这个id为username的input框中

我的做法是:

根据class来对元素添加一个onclick监听事件,因为不想给每个li都加一个onclick方法

遇到的情况是:

不起效果,好像我这种写法对一开始就加载好的元素有效,但对网页加载完成后的异步传输的元素不起作用,不知道该怎么改进

$(function(){
    $(".userlist").on({
        onclick: function(){
            $('#username').val($(this).val());
        }
    });
});
回复
阅读 11.2k
2 个回答
✓ 已被采纳

由于事件冒泡机制,除非在事件处理过程中被主动阻止冒泡(e.stopPropagation()),否则会将事件传递到document元素上。因此,在document元素上捕获click事件,并判断触发事件的元素有没有你想要的CSS类,就可以做到,动态增加的DOM元素的相应事件也能够被正确的处理。

在旧版jQuery,对应着live()/delegate()方法;新版的jQuery,阉割掉了live和delegate方法,用On来处理。

以下摘自jQuery文档

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

所以对于楼主的要求就是:

$( document ).on( "click", ".userlist", function(){ 
    //你的事件处理过程
    $('#username').val($(this).val());
}); // jQuery 1.7+
宣传栏