jQuery可用于未来的动态事件方法on()

之前，我们聊过了jQuery动态操作Dom元素后，获取不到动态Dom元素的原因及解决办法。

jQuery动态操作Dom元素后，获取不到动态Dom元素的原因及解决办法

实际使用中，可能有的朋友发现还是无法使用，这里做一下简单的说明。

新增DOM时新增事件

这个很容易理解，当你啪啪啪写了一堆代码时，在一堆逻辑中间，新增了DOM，然后希望在外部对这个DOM进行操作，发现怎么都不能操作。

这种情况，考虑一下在新增DOM的后方，也就是逻辑代码内，新增事件。

如：

$.each(data.data, function (i, n) {
                  rightContent +=
                    '<li class="article_read" url="' + n['id'] + '"><div><p class="title">' + n['title'] + '</p><p class="article_content">' + n['share_desc'] + '</p><p class="type"><span class="layui-badge layui-bg-green">' + n['type'] + '</span>&emsp;&emsp;<span class="layui-badge-rim">' + n['create_time'] + '</span></p></div></li><hr>'
                })
                rightContent += '</ul>';
                console.log(rightContent);
                $('.list').append(rightContent);
                // 查看文章
                $('.article_read').on('click','p',function(){
                  console.log($(this));
                  console.log('read');
                })

$.each(data.data, function (i, n) {

rightContent +=

'<li class="article_read" url="' + n['id'] + '"><div>' + n['title'] + '' + n['share_desc'] + '' + n['type'] + '&emsp;&emsp;' + n['create_time'] + '</div></li><hr>'

})

rightContent += '</ul>';

console.log(rightContent);

$('.list').append(rightContent);

// 查看文章

$('.article_read').on('click','p',function(){

console.log($(this));

console.log('read');

})

上面的代码对json返回的数据遍历并写到DOM中，设置在$(‘.list’)，最后查看文章时，进行事件委托，就能正常操作访问这个DOM。

当然，上面代码中，我是用了jQuery1.7后的on()，网上说的bind()、live()、delegate()，能不能用，怎么用，不妨自己实践一下。

原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/10984