jQuery如何訪問插入DOM的html上的事件

Question

在我的Web應用程序中，有15個項目的無序列表，這些列表在加載時顯示。 我正在使用ajax從API捕獲100個新項目，並使用.append(html)將它們添加到當前ul 。 每個li旁邊都有一個復選框，選中該復選框時需要調用some_function 。

已渲染的元素能夠訪問some_function但不能訪問新加載的元素。 如何訪問新加載的ajax項目上的some_function ？ 我以前從未處理過這個問題，顯然因為這些項目不是“呈現”的，但它們無法訪問功能？

Answer 1

在這種情況下，您可以使用jQuery on()函數

您可以在這里了解更多信息

Answer 2

使用事件委托-

$(document).on('change',".YourInputClass", some_function);

Answer 3

在這種情況下，您應該使用事件委托。.基本上，您將處理程序綁定到父元素，並由選擇器過濾出來以觸發處理程序。

下面是偽代碼，

$('ul').on('click', '.checkbox', function () {
   some_function.call(this); //maintain the context if it is an external function.
});

Answer 4

您需要delegate the events.

如果<div id="div1"></div>是動態注入的元素，並且您想附加click事件

$('staticContainer').on('click', '#div1', some_function);

Answer 5

沒有看到您的代碼，我想您已經將事件處理程序直接綁定到了復選框

$('input[type="checkbox"]').click(function(event) {
    // Your code
});

要使此功能與創建處理程序后添加的內容一起使用，您將需要使用委派的處理程序，該處理程序綁定到較低級別的，未更改的元素，並將事件冒泡到復選框。 我使用過document盡管建議將其綁定到更遠的dom節點，最有可能是將復選框添加到的ul 。

$(document).on('click', 'input[type="checkbox"]', function(event) {
    // Your code
});