JQuery .on（“click”，function（））不起作用

Question

當我選中復選框時，我試圖解雇JQuery。 起初我意識到我的JQuery只適用於靜態元素。 我閱讀了幾篇文章，發現我需要.on（“click，function（））才能為動態添加的元素觸發相同的javascript。

但是，這種方法對我來說仍然不起作用。 有人可以幫忙嗎？ 謝謝。

$(document).ready(function(){
    $("input[name='todo']").on('click', function(){
    var isChecked = this.checked
           if (isChecked == true){
          $(this).next().remove();
          $(this).remove(); 
        }
        if (isChecked == false)
        {
        alert("checkbox is NOT checked");
        }

        });

    });

我的示例應用程序： http ： //jsfiddle.net/JSFoo/7sK7T/8/

Answer 1

你需要代表團：

$('#ToDoList').on('click', "input[name='todo']", function() { ... });

http://jsfiddle.net/7sK7T/9/

文檔： http ： //api.jquery.com/on/#direct-and-delegated-events

PS：重要的注意事項 - 您需要將處理程序綁定的元素指定為盡可能接近目標元素。 在你的情況下，它是#ToDoList ，而不是其他答案建議的body或document 。

Answer 2

對於動態元素，您可能希望執行此類操作

$(document).ready(function () {
    $(document).on('click', "input[name='todo']", function () {
        var isChecked = this.checked
        if (isChecked == true) {
            $(this).next().remove();
            $(this).remove();
        }
        if (isChecked == false) {
            alert("checkbox is NOT checked");
        }

    });

});

如果你像以前一樣使用它on('click')基本上與click();相同click(); 因為您仍在選擇所需的元素並將事件應用於這些元素，所以上述示例的工作方式是僅將事件應用於document然后在觸發事件時檢查選擇器。

如果您願意，還可以將document更改為要單擊的元素的關閉容器。

這稱為事件委派

jQuery學習事件委派

Answer 3

以下是您所需要的。 它的語法略有不同

$(document).on('click', "input[name='todo']", function(){

Answer 4

您可以在文檔准備就緒之前綁定它們，這是在它們創建之前。 你必須在他們的創作后綁定。

或者，您可以在document.ready上綁定它們的容器：

$("#containerDiv").on('click', "input[name='todo']", function(){
   // .... your code
});

• “containerDiv”應該是那些復選框的父元素，它應該在文檔准備好的頁面中！