javascript - attribute - 在jQuery中,如何將事件附加到動態html元素?

你想使用live()函數。 看.live() 。

例如：

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});

在jQuery 1.7之後，首選的方法是http://api.jquery.com/on/和http://api.jquery.com/on/ .off()

肖恩的回答顯示了一個例子。

現已過時：

使用jQuery函數.live()和.die() 。 在jQuery 1.3.x中可用

從文檔：

每當單擊某個警報框時，每個段落的文本都會顯示出來：

$("p").live("click", function(){
  alert( $(this).text() );
});

此外， livequery插件可以完成此操作並支持更多事件。

如果您將一堆錨定添加到DOM，請考慮事件委派。

這裡有一個簡單的例子：

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

您可以將單個點擊事件綁定到所有元素的頁面，無論它們是否已經在該頁面上，或者它們是否將在未來某個時間到達，如下所示：

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

已經使用了一段時間。 奇蹟般有效。

在jQuery 1.7和更高版本中，建議使用.on()代替綁定或任何其他事件委託方法，但.bind()仍然有效。

有時候做這個（頂級答案）並不總是足夠的：

$('body').on('click', 'a.myclass', function() {
    // do something
});

這可能是一個問題，因為訂單事件處理程序被觸發。 如果你發現自己正在做這件事，但由於它的處理順序，它會引發問題。你可以隨時把它包裝到一個函數中，當它被調用時“刷新”監聽器。

例如：

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

因為它是一個函數，所以每當我以這種方式設置我的偵聽器時，我通常會在文檔準備就緒時調用它：

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

然後，每當添加一些動態添加的元素時，再次調用該方法：

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

希望這有助於！

問候，

為所有當前和將來匹配的元素綁定一個事件處理程序（如單擊）。 也可以綁定自定義事件。

.live()

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});