在jquery中切換動態創建的div

-1

我有兩個div，類名爲list_item和list_item_menu。他們都被包含在另一個div類list_item_container。我可以使用以下方法來顯示/隱藏list_item_menu點擊list_item時：在jquery中切換動態創建的div

$(".list_item").click(function() { 
    $(this).next('.list_item_menu').toggle(); 
});

時的div都寫在原始的HTML這工作，但動態創建的div時，則這種切換不起作用。我試着像這樣創建它們：

function addListItem() { 
var text = $("#new_item_field").val(); 
$("#list_box").children().last().after(
    '<div class = "list_item_container">'+ 
     '<div class = "list_item">'+ 
      text+ 
     '</div>'+ 
     '<div class = "list_item_menu">'+ 
      'notes | due | completed'+ 
     '</div>'+ 
    '</div>' 
); 
$("#new_item_field").val(''); 
}

像這樣：

function addListItemToDoc() { 
var text = $("#new_item_field").val(); 

var listbox = document.getElementById('list_box'); 
var container = document.createElement('div'); 
    container.className = 'list_item_container'; 
var item = document.createElement('div'); 
    item.className = 'list_item'; 
    item.innerHTML = text; 
var menu = document.createElement('div'); 
    menu.className = 'list_item_menu'; 
    menu.innerHTML = "notes | due | completed"; 

container.appendChild(item); 
container.appendChild(menu); 
listbox.appendChild(container); 

    $("#new_item_field").val(''); 
}

但既不方式似乎工作。有任何想法嗎？

來源

2013-07-10 mattjulian

查看jQuery中的'。.on（）'。基本上你想要委託事件。 – Robusto

由於它們是動態創建的，你需要使用事件委託和綁定單擊事件到DOM中已存在的元素：

$(".list_item").click(function() {

Ca n成爲：

$("#list_box").on("click", ".list_item", function() {

來源

2013-07-10 17:50:08 tymeJV

現在閱讀文檔，並找出爲什麼這個工程。謝謝！ – mattjulian

@mattjulian - 很簡單，您的點擊處理程序是在DOM就緒功能中創建的。當您動態創建元素時，它們不在DOM準備好的位置，因此您的點擊處理程序無法綁定到尚不存在的元素。 – tymeJV

在這種情況下，你應該使用on()：

$(document).on('click', '.list_item', function() { 
    // Your code here 
});

來源

2013-07-10 17:50:06

使用上，而不是點擊綁定事件

$("#list_box").on("click",".list_item", function() { 
    $(this).next('.list_item_menu').toggle(); 
});

來源

2013-07-10 17:50:07 Adil

在jquery中切換動態創建的div

回答

相關問題