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

【问题标题】：Adding Click Function to Dynamically Generated div jquery将 Click 函数添加到动态生成的 div jquery
【发布时间】：2014-05-02 12:11:51
【问题描述】：

我对 JQuery 还很陌生，我在将函数绑定到动态生成的 div 时遇到问题。

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

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

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

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

【问题讨论】：

stackoverflow.com/questions/8752321/…
最后一行代码应该是：$(course).empty();
是的，应该的，谢谢。

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

谢谢，这很有帮助。我在 JQuery 文档中进行了一些挖掘，但从未偶然发现这一点。这正是我所需要的。

【解决方案2】：

将点击事件委托给最近的容器以获得更好的性能。

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

});

【讨论】：

【解决方案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);

【讨论】：