jQuery的不列入事件綁定到AJAX添加DOM

我有如下加載的4個複選框內容的AJAX功能：jQuery的不列入事件綁定到AJAX添加DOM

$.ajax({ 
url : some url.., 
dataType : 'json', 
success : function(data) { 
    buildCheckboxes(data); 
    }, 
error : function(data) { 
      do something... 
    } 
});

建設複選框方法做這樣的事情：

function updateNotificationMethods(items) { 
    var html = []; 
    $.each(items, function(i, item) { 
     htmlBuilder = []; 
     htmlBuilder.push("<input type='checkbox' class='checkbox-class' name='somename' value='"); 
     htmlBuilder.push(item.id); 
     htmlBuilder.push("'"); 
     htmlBuilder.push("/>&nbsp;"); 
     htmlBuilder.push(item.name); 
     htmlBuilder.push("<br/><br/>") 
     html.push(htmlBuilder.join('')); 
    }); 
    $("#div").html(html.join('')); 
}

我有複選框值更改時應觸發的事件聯編程序：

$(".checkbox-class").change(function() { 
alert("change"); 
});

它的工作原理如果我在源代碼中有複選框html（即靜態），而不是我在這裏設置，我動態地從服務器加載數據。

有什麼我可以做，以便綁定發生及時？

平安！

來源

2012-10-31 Isaac

http://jqfundamentals.com/chapter/事件 – jbabey

確定問題是通過「活」解決的，但可以考慮使用模板來實時構建html。 jquery.tmpl或underscore.js非常適合這份工作 – melanke

@melanke謝謝你的提示，我一定會用它:) – Isaac

這是因爲當你綁定你的處理程序時，元素不存在。

試試這個：

$(document).on('change', '.checkbox-class', function() { 
    alert("change"); 
});

或者，如果您使用的是舊版本的jQuery（小於1.7）...

$('.checkbox-class').live(function() { 
    alert("change"); 
});

來源

2012-10-31 20:00:47

謝謝，它的作品！所以我假設等待所有dom被加載？ – Isaac

這是使用委派解決問題的正確方法。儘管找到一個比'document'更具體的容器是理想的（對於OP來說） – Ian

@Ibrahim是的，你仍然需要把它放在'document.ready'裏面。 – Ian

當您綁定事件時，複選框不可用。 jsfiddle

假設具有id div的元素在綁定事件時存在。

$("#div").on("change",".checkbox-class",function() { 
    alert("change"); 
});

來源

2012-10-31 20:00:00 Anoop

不是。這將是'$（'。parent-of-checkbox'）。on（'change'，'.checkblox-class'，function（）...）;' – Shmiddty

@KevinBoucher沒有。這隻會在其調用時綁定到現有的「checkbox-class」元素;任何具有該類的動態創建的元素都不會具有該更改事件的回調。 – Shmiddty

@KevinBoucher你在說什麼？不，它也不可能。它只能**是委託的方式，這就是Shmiddty所說的。 Sushil的答案和普通的'bind'沒有區別。 – Ian

此代碼：

$(".checkbox-class").change(function() { 
alert("change"); 
});

不建立連續的和正在進行的規則，相反，此代碼att會將事件管理器（在本例中爲更改事件）刻錄到執行時存在的每個匹配DOM對象。
如果您希望每次將複選框添加到DOM時都可以重新執行此代碼（或其中一個相似且較窄）。

來源

2012-10-31 20:27:19

jQuery的不列入事件綁定到AJAX添加DOM

回答

相關問題