本文介绍了js/jq 动态添加的元素不能触发绑定事件解决方案,如果jquery版本是在1.3-1.8之间的话,js/jq动态添加的元素触发绑定事件的解决方法。

请看看你们的版本并对号入座:

jquery1.6版本以下都不支持on委托事件

jquery1.3 至 jQuery1.8版都支持live委托事件

jquery1.9 以后的版本不支持live委托事件,但是on事件可以替代live

jquery1.3版本以下的(不包括jquery1.3),是时候更新你的jquery版本了。因为 无解无解无解无解无解无解

如果jquery版本是在1.3-1.8之间的话,js/jq动态添加的元素触发绑定事件的解决方法(不建议用on事件,因为1.6版本以下不支持on事件,会报错)

click例子
$('element').live('click',function(){})
element可以是动态生成的元素,可以是它的类或者id
登录后复制

如果jquery版本是在1.9或者更高的话,live委托事件是被移除的,通过on来实现。js/jq动态添加的元素触发绑定事件的解决方法

click例子
$('父元素').on('click', '子元素', function(){})
登录后复制
<!DOCTYPE html>
<html>
<head>
    <title>js/jq 动态添加的元素不能触发绑定事件解决方案</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body>
<button>添加a标签</button>
<p class="a-Box">
    <a href="javascript:;" class="alt">My name is</a><br>
</p>
</body>
</html>
<script type="text/javascript">
    $('.a-Box').on('click', 'a', function(){
        alert('Jachin');
    })
    $('button').click(function(){
        $('p').append('<a href="javascript:;" class="alt">My name is</a><br>');
    })
</script>
登录后复制

这样就可以完美解决动态加载出来的元素无法被监听。

以上就是js/jq动态加载出来的元素无法被监听的解决方案的详细内容,更多请关注Work网其它相关文章!

08-18 14:33