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




html title attribute (6)

這個問題在這裡已經有了答案:

假設我有一些jQuery代碼將一個事件處理程序附加到類“myclass”的所有元素上。 例如:

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

我的html可能如下所示:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

這沒有問題。 但是,請考慮是否將“myclass”元素在未來某個時間寫入頁面。

例如:

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

在這種情況下,當用戶點擊#anchor1時會創建“test4”鏈接。

“test4”鏈接沒有與它關聯的click()處理程序,即使它具有class =“myclass”。

任何想法如何我可以解決這個問題?

基本上,我想編寫click()處理程序一次,並將其應用於頁面加載時的內容和稍後通過Ajax / DHTML引入的內容。


你想使用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
    });
});




dhtml