在jquery中切换动态创建的div

我有两个div，类名为

list\u item

和

list\u item\u菜单

。它们都包含在另一个div中，该div具有类

list\u item\u容器

。单击

list\u item

时，我可以使用以下选项显示/隐藏

list\u item\u菜单

：

$(".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('');
}

---

但这两种方法似乎都不管用。有什么想法吗？

在这些情况下，您应该使用：

---

使用on而不是单击来绑定事件

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

---

由于它们是动态创建的，因此需要使用事件委派并将click事件绑定到DOM就绪时存在的元素：

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

可以成为：

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

---

查看jQuery中的

$.on（）

。基本上，您希望委派事件。现在请阅读文档并找出为什么这样做。谢谢@mattjulian——很简单，单击处理程序是在DOM就绪函数中创建的。当您动态创建元素时，它们在DOM就绪时并不存在，因此您的单击处理程序无法绑定到尚不存在的元素。

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