Javascript 为什么当我点击图片时什么都没发生？

我是jQuery的新手，所以希望这不是两个愚蠢的问题，但我已经四处看看了

我有一个简单的待办事项列表：我很好奇为什么在添加一个项目后单击显示的图像时，函数什么也不做

下面是两个值得关注的方法…我很确定它们没有被调用。我不确定为什么：

$('.delete').on('click', function(event) { 
    event.preventDefault();
    var reply = confirm("Are you sure you want to delete this todo item?");
    if(reply === true) {
        $(this).closest('.item').remove();
    } 
});

$('.edit').on('click', function(event) { 
    $(this).closest('.item').slideDown('fast');
});

---

您可以按如下方式使用事件委派：

$('#list').on('click', '.delete', function(event) { 
    event.preventDefault();
    var reply = confirm("Are you sure you want to delete this todo item?");
    if(reply === true) {
        $(this).closest('.item').remove();
    } 
});

$('#list').on('click', '.edit', function(event) {
    $(this).closest('.item').slideDown('fast');
});

另一个更有效的选项是定义单击处理程序，然后在创建它们之后将它们分配给元素：

var onDeleteButtonClicked = function(event) {
    //delete code from above.
};

var onEditButtonClicked = function(event) {
    //edit code from above.
};

function addTo(event) {
    event.preventDefault();

    var toAdd = $('#addition').val();

    if(toAdd.length > 0) {
        var listItem = $('<li class="item">' + toAdd + '</li>');
        var img = $('<img class="delete" src="https://cdn1.iconfinder.com/data/icons/uidesignicons/delete.png">')
            .click(onDeleteButtonClicked); //Assign your delete click handler here.
        var img1 = $('<img width="4%" class="edit" src="https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Modify.png">')
            .click(onEditButtonClicked); //Assign your edit click handler here.
        listItem.append(img);
        listItem.append(img1);
        $('#list').append(listItem);
        $('#addition').val("")
    } else {
        alert("Cannot add empty list item!");
    }
}

试试这个：

$('#container').on('click','.delete' ,function(event){

    event.preventDefault();
    var reply = confirm("Are you sure you want to delete this todo item?");
    if(reply === true) {
        $(this).closest('.item').remove();
    }

});

---

因为同一类有更多的对象。在创建元素之前会调用.on方法。只能将处理程序绑定到存在的元素。要解决这个问题，可以使用事件委派。这意味着您将处理程序绑定到某个祖先，如列表元素，然后在单击适当的嵌套元素时运行代码。jQuery确定单击内容的方法使用CSS选择器。要了解如何使用它们，请阅读.on的文档。否则，您可以在创建新元素时直接绑定处理程序。很长时间没有看到这种问题…@这是好事还是坏事？我是不是因为不知道什么而被投票否决了？我觉得有点可笑。。。这个网站的目的是什么。那个么img.bind？您不需要事件委派，但这是一种选择。也许你应该向OP解释一下这是怎么回事。他可以在创建元素时分配click事件处理程序。我理解这是怎么做的，谢谢。我想当我把所有东西都放在$document.readyfunction{}中时，我认为这就是我所做的@nickbonnet，在文档完全加载时只运行一次，然后不再运行。