js/jq 動態添加的元素不能觸發綁定事件解決方案

時間 2019-12-14

原文原文鏈接

<!--
Copyright 2017-10-27, Jachin
QQ: 381558301
Email: 381558301@qq.comjavascript

請看看大家的版本並對號入座：
jquery1.6版本如下都不支持on委託事件
jquery1.3 至 jQuery1.8版都支持live委託事件
jquery1.9 之後的版本不支持live委託事件,可是on事件能夠替代live

css

jquery1.3版本如下的（不包括jquery1.3），是時候更新你的jquery版本了。由於無解無解無解無解無解無解html

若是jquery版本是在1.3-1.8之間的話，js/jq動態添加的元素觸發綁定事件的解決方法（不建議用on事件，由於1.6版本如下不支持on事件，會報錯）java

click例子
$('element').live('click',function(){})
element能夠是動態生成的元素，能夠是它的類或者id
1
2
3
若是jquery版本是在1.9或者更高的話，live委託事件是被移除的，經過on來實現。js/jq動態添加的元素觸發綁定事件的解決方法jquery

注意注意：若是頁面同時存在低版本的jq（1.3-1.8）和高版本jq（jquery1.9以上）的話，live委託事件會被高版本移除，最後致使雖然有jquery版本是在1.3-1.8之間，使用了live事件，頁面會報錯。
click例子
$('父元素').on('click', '子元素', function(){})
1
2
此時動態加載出來的元素必定要在$(‘父元素’)裏面，不然綁定事件失效。換句話說，本應該綁定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>
<div class="a-Box">
<a href="javascript:;" class="alt">My name is</a><br>
</div>
</body>
</html>
<script type="text/javascript">
$('.a-Box').on('click', 'a', function(){
alert('Jachin');
})
$('button').click(function(){
$('div').append('<a href="javascript:;" class="alt">My name is</a><br>');
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
這樣就能夠完美解決動態加載出來的元素沒法被監聽。app

最後附上個版本的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>

cdn