js/jq动态加载出来的元素无法被监听的解决方案-tutorial js-php.cn

js/jq动态加载出来的元素无法被监听的解决方案

php是最好的语言

Lepaskan： 2018-07-23 12:02:50

asal

2759 orang telah melayarinya

本文介绍了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例子
$(&#39;element&#39;).live(&#39;click&#39;,function(){})
element可以是动态生成的元素，可以是它的类或者id

Salin selepas log masuk

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

注意注意：如果页面同时存在低版本的jq（1.3-1.8）和高版本jq（jquery1.9以上）的话，live委托事件会被高版本移除，最后导致虽然有jquery版本是在1.3-1.8之间，使用了live事件，页面会报错。

click例子
$(&#39;父元素&#39;).on(&#39;click&#39;, &#39;子元素&#39;, function(){})

Salin selepas log masuk

此时动态加载出来的元素一定要在$(‘父元素’)里面，否则绑定事件失效。换句话说，本应该绑定A元素，但是A元素是动态生成的，所以jq应该获取A元素的父元素来监听A元素是否发生click事件。
举个例子

<!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">
    $(&#39;.a-Box&#39;).on(&#39;click&#39;, &#39;a&#39;, function(){
        alert(&#39;Jachin&#39;);
    })
    $(&#39;button&#39;).click(function(){
        $(&#39;p&#39;).append(&#39;<a href="javascript:;" class="alt">My name is</a><br>&#39;);
    })
</script>

Salin selepas log masuk

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

最后附上个版本的jquery

<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

Salin selepas log masuk

Atas ialah kandungan terperinci js/jq动态加载出来的元素无法被监听的解决方案. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!