javascript - 将点击功能添加到动态生成的div jquery

Question

我是 JQuery 的新手，我在将函数绑定(bind)到动态生成的 div 时遇到了问题。

本质上，用户单击一个按钮，将几个 div 添加到容器中，并更改该容器的背景颜色。我希望他们可以选择通过单击其中一个 div 来删除他们添加的内容。

我有这个功能，我认为应该这样做:

$('.course-delete').click(function() {
    var course = $(this).parent();
    alert("hello");
    $(course).css('background', "#fff");
    $(course).empty();  
});

但是无论出于何种原因，当我单击 div 时没有任何反应。如果有人知道发生了什么，我将不胜感激。

Answer 1

听起来，当 jQuery 尝试绑定(bind)处理程序时，您的 .course-delete 元素不存在 - 因为您的 div 是稍后动态创建的。如果这是问题所在，那么事件委托(delegate)将是您的救星:https://learn.jquery.com/events/event-delegation/

$(document).on('click', '.course-delete', function () {
    /* do delete stuff here */
});