我对JQuery相当新,我遇到了将函数绑定到动态生成的div的问题。
基本上,用户单击一个按钮,将一对div添加到容器中,并更改该容器的背景颜色。我希望他们可以选择通过单击其中一个div来删除他们添加的内容。
我有这个功能,我认为应该这样做:
$('.course-delete').click(function() {
var course = $(this).parent();
alert("hello");
$(course).css('background', "#fff");
$(course).empty();
});
但无论出于什么原因,当我点击div时没有任何反应。如果有人知道发生了什么,我会很感激。
答案 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);