對於動態載入內容 (包括 Ajax 請求內容) 繫結點選事件

_zzh發表於2019-06-28
事件

首先看看如下程式碼執行：

<html>
<head>
<meta charset="utf-8">
<title>文件標題</title>
</head>
<body>
    <div id="the_div">
    </div>
    <button id="btn">test</button>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <script>
  $('#btn').click(function(){
    $('#the_div').append('<button>new button</button>');
})

$('#the_div button').click(function(){
    alert('clicked');
})
  </script>
</body>
</html>

初始時會監聽#btn即test按鈕，以及#the_div button即div中的所有按鈕的click事件。當點選test按鈕後div內會動態新增new button按鈕，而我們期望點選new button按鈕後，會彈出一個alert，但事實上這麼做是不會觸發alert的。

.click()實際上是.on( "click", handler )的簡化，而$( selector ).on( events, handler )只會對當前已經存在，且滿足selector條件的元素繫結events，也就是說，這個繫結只針對於當前存在的元素，而在其之後加入到DOM中的元素，即使滿足selector條件，也不會繫結對應的events。

實際上jQuery也有專門的方法解決這個需求，即[.live()]，$( selector ).live( events, handler )會對所有當前和未來滿足selector條件的元素繫結對應的events。

但從jQuery 1.9開始，.live()就被移除了。

在.live()的API文件中，官方就給出了替代.live()的方法，即目前最常用的方法：$( document ).on( events, selector, data, handler );

$( "a.offsite" ).live( "click", function() {
  alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).on( "click", "a.offsite", function() {
  alert( "Goodbye!" );  // jQuery 1.7+
});

對於上述例子的解決方案：

<html>
<head>
<meta charset="utf-8">
<title>文件標題</title>
</head>
<body>
    <div id="the_div">
</div>
<button id="btn">test</button>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <script>
  $('#btn').click(function(){
    $('#the_div').append('<button>new button</button>');
})
//解決方案
$('body').on('click','#the_div button',function(){
    alert('clicked');
})
  </script>
</body>
</html>

原文：https://www.polarxiong.com/archives/jQuery...

相關文章