搜尋

首頁 >web前端 >js教程 >js/jq動態載入出來的元素無法被監聽的解決方案

js/jq動態載入出來的元素無法被監聽的解決方案

php是最好的语言
php是最好的语言原創
2018-07-23 12:02:502776瀏覽

本文介紹了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動態新增的元素觸發綁定事件的解決方法

注意注意：如果頁面同時存在低版本的jq（1.3-1.8）和高版本jq（ jquery1.9以上）的話，live委託事件會被高版本移除，最後導致雖然有jquery版本是在1.3-1.8之間，使用了live事件，頁面會報錯。 

click例子
$('父元素').on('click', '子元素', function(){})

此時動態載入出來的元素一定要在$(‘父元素’)裡面，否則綁定事件失效。換句話說，本來應該綁定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>

這樣就可以完美解決動態載入出來的元素無法被監聽。

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

以上是js/jq動態載入出來的元素無法被監聽的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何使用node產生驗證碼下一篇：如何使用node產生驗證碼

相關文章

看更多