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

时间:2014-03-24 21:45:30

标签: javascript jquery html css

我对JQuery相当新,我遇到了将函数绑定到动态生成的div的问题。

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

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

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

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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

});

答案 2 :(得分:0)

你也可以......

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