将Click函数添加到动态生成的div jquery中

Question

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

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

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

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

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

Answer 1

通过它的声音，当jQuery尝试绑定处理程序时，你的.course-delete元素不存在 - 因为你的div是以后动态创建的。 如果这是问题，那么事件委托将成为你的救星： https ： //learn.jquery.com/events/event-delegation/

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

Answer 2

将click事件委派给最近的容器以获得更好的性能。

$("#divcontainer").on("click", ".course-delete", function() {

});

Answer 3

你也可以......

//Create your new DIV
var newDiv=$('<div />',{
html:'This is sample HTML', // add your HTML
click:function(){
// your click event handler
}
});

然后添加到您的文档，如...

newDiv.appendTo('body');//or any selector you want to append to. Use prependTo if you want it as the first element of the container.

所以当合并时，你可以像这样写...

$('<div />',{// you can set attributes and other stuff here
    html:'This is sample HTML', // add your HTML
    click:function(){
    // your click event handler
    }
 }).appendTo(container);