如何在 Ajax 加載的內容上綁定事件？

Question

我有一個鏈接myLink ，它應該將 AJAX 加載的內容插入到我的 HTML 頁面的div ( myLink ) 中。 問題是我與 jQuery 綁定的click事件沒有在插入到 appendedContainer 的新加載的內容上執行。 click事件綁定在未使用我的 AJAX 函數加載的 DOM 元素上。

我必須更改什么才能綁定事件？

我的 HTML：

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

我的 JavaScript：

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

要加載的內容：

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

Answer 1

對動態創建的元素使用事件委托：

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

這確實有效，這是一個示例，我在其中附加了一個帶有.mylink類而不是data的錨點 - http://jsfiddle.net/EFjzG/

Answer 2

如果在調用 .on() 之后追加內容，則需要在加載內容的父元素上創建委托事件。 這是因為在調用 .on() 時綁定了事件處理程序（即通常在頁面加載時）。 如果調用 .on() 時元素不存在，則事件不會綁定到它！

由於事件通過 DOM 向上傳播，我們可以通過在我們知道頁面加載時存在的父元素（下面示例中的.parent-element ）上創建一個委托事件來解決這個問題。 就是這樣：

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

關於該主題的更多閱讀：

• https://learn.jquery.com/events/event-delegation/
• http://jqfundamentals.com/chapter/events

Answer 3

如果您的問題是“如何在 ajax 加載的內容上綁定事件”，您可以這樣做：

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

所以你不需要把你的配置放在你的每一個 ajax 代碼中

Answer 4

從 jQuery 1.7 開始，不推薦使用.live()方法。 使用.on()附加事件處理程序。

例子 -

$( document ).on( events, selector, data, handler );

Answer 5

對於那些仍在尋找解決方案的人，最好的方法是將事件綁定在文檔本身上，而不是與“准備就緒”事件綁定，例如：

$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

});

Answer 6

例如，如果您的 ajax 響應包含 html 表單輸入，那么這會很棒：

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});

Answer 7

改用 jQuery.live() 。 文檔在這里

例如

$("mylink").live("click", function(event) { alert("new link clicked!");});

Answer 8

對於 ASP.NET，試試這個：

<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

這似乎適用於頁面加載和更新面板加載

請在此處找到完整的討論。

Answer 9

Ajax 加載內容事件綁定的重要步驟...

01 . 首先取消綁定或關閉選擇器上的事件

$(".SELECTOR").off();

02 . 在文檔級別添加事件偵聽器

$(document).on("EVENT", '.SELECTOR', function(event) { 
    console.log("Selector event occurred");
});

Answer 10

這是我的首選方法：

// bind button click to function after button is AJAX loaded
$('#my_button_id').bind('click', function() {
    my_function(this);
});

function my_function () {
    // do stuff here on click
}

我在 AJAX 調用完成后立即放置此代碼。

Answer 11

作為 JS 新手，我會添加一點對我來說並不明顯 - 通常您的事件會在文檔中進行連接，例如：

$(function() {
    $("#entcont_table tr td").click(function (event) {
    var pk = $(this).closest("tr").children("td").first().text();
    update_contracts_details(pk);
});
}

但是，使用事件委托，您會想要：

$(function() {
    // other events
}

$("#entcont_table").on("click","tr td", function (event) {
    var pk = $(this).closest("tr").children("td").first().text();
    update_contracts_details(pk);
});

如果您的事件委托是在准備好的文檔中完成的，則會出現類似錯誤：

cant assign guid on th not an boject