[英]Remove div on the click of a link that was created dynamically
I have the following code, when a checkbox is clicked it creates a div with some info. 我有以下代码,当单击复选框时,它将创建一个包含一些信息的div。 However in that div I added an anchor tag to remove the div itself.
但是,在该div中,我添加了一个锚标记来删除div本身。
However, I am not sure how to remove the div on the link click because the div is dynamically generated. 但是,我不确定如何在链接单击上删除div,因为div是动态生成的。
//Add selected job in the results div
function AddSelectedJob(id, display) {
//create a div for every selected job
$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="#">Remove selected job</a></div>');
}
$(document).on('click','.selectedjobs a',function(){
$(this).parent().remove();
});
give your div
a class and use on
delegate event 给您的
div
一个类并on
委托事件上使用
try this 尝试这个
$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="#" class="removeJob">Remove selected job</a></div>');
$('[id$=ResultsDiv]').on('click','.removeJob',function(){
$(this).parent().remove();
})
OR 要么
without using class 不上课
$('[id$=ResultsDiv]').on('click','.selectedjobs a',function(){
$(this).parent().remove();
})
note: delgating it to the closest static parent container is better than the document
itself 注意:将其分配到最近的静态父容器比
document
本身更好
USE THIS CODE :- 使用此代码:
//Add selected job in the results div //在结果div中添加选定的作业
function AddSelectedJob(id, display) {
//create a div for every selected job
$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="javascript:;" onclick="removeSelectedJob(this)">Remove selected job</a></div>');
}
function removeSelectedJob(el){
$(el).parent().remove();
}
something like: 就像是:
$("#ResultsDiv>div.selectedjobs a").click(function(){
$(this).parent().remove();
});
Try live click... 尝试现场点击...
$(".selectedjobs a").live("click", function(){
$(this).parent().remove();
});
In this case divs are not usually created but are rather hidden instead by which you would a lot of hassle. 在这种情况下,通常不会创建div,而是将其隐藏起来,而这会带来很多麻烦。 You can create a div that has "display:none;"
您可以创建一个具有“ display:none;”的div。 in CSS and then when the tickbox is checked you can use
在CSS中,然后选中复选框后,您可以使用
$("[id$=ResultsDiv]").show();
and when it is unchecked, 如果未选中,
$("[id$=ResultsDiv]").hide();
I prefer using .parents() in this case. 在这种情况下,我更喜欢使用.parents()。
And if possible, add a class to your anchor, then return false or use .preventDefault() to prevent anchor's default action. 并尽可能将一个类添加到锚,然后返回false或使用.preventDefault()来阻止锚的默认操作。
//Add selected job in the results div
function AddSelectedJob(id, display) {
//create a div for every selected job
$("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a class="removeSelectedJobs" href="#">Remove selected job</a></div>');
}
$('.selectedjobs .removeSelectedJobs').live('click', function() {
$(this).parents('.selectedjobs').remove();
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.