为动态生成的 div 添加点击功能 jquery

Question

我对jQuery还比较陌生，遇到了一个问题，无法将功能绑定到动态生成的div上。

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

我想这个函数应该可以实现：

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

但是无论出于何种原因，当我点击这个div时什么也没有发生。如果有人知道发生了什么，请告诉我。

- kcc989

---

https://dev59.com/zWoy5IYBdhLWcg3wJKkq - CBroe

代码的最后一行应该写成：$(course).empty(); - Alec Moore

是的，应该的，谢谢。 - kcc989

Answer 1

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

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

- 76484

---

非常感谢，这非常有帮助。我在 JQuery 文档中进行了一些搜索，但从未遇到过这种情况。这正是我所需要的。 - kcc989

Answer 2

将点击事件委托给最近的容器，以提高性能。

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

});

- Wilmer

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);

- Ananthan Unni