Javascript 删除附加的html代码
我目前遇到了一个问题,我无法用jQuery删除附加的html 现在有效的是我可以附加我想要的html,它看起来不错,但是删除不起作用。它只在重新加载第一个加载的html时起作用,而我附加的其他html不起作用-我不知道为什么 以下是我附加html的代码:Javascript 删除附加的html代码,javascript,jquery,html,Javascript,Jquery,Html,我目前遇到了一个问题,我无法用jQuery删除附加的html 现在有效的是我可以附加我想要的html,它看起来不错,但是删除不起作用。它只在重新加载第一个加载的html时起作用,而我附加的其他html不起作用-我不知道为什么 以下是我附加html的代码: $("#adWasteStream").click(function(){ var newTxt = $('<div class="row-waste-container width-100"><div class="
$("#adWasteStream").click(function(){
var newTxt = $('<div class="row-waste-container width-100"><div class="row"><div class="col-md-9"><p>Stream 1</p></div><div class="col-md-3"><button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button></div><div class="form-group col-md-7"><label for="business-mng-name" class="control-label">Waste Stream</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling"><span class="help-block"></span></div></div><div class="row width-100"><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Weight (t)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Cost ($)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400"><span class="help-block"></span></div></div></div>');
$(".row-cont-main").append(newTxt);
});
我不需要使用Id,因为它们需要在所有元素中都是唯一的(用于后端目的)
html的结构如下所示:
<div class="row-waste-container width-100">
<div class="row">
<div class="col-md-9">
<p>Stream 1</p>
</div>
<div class="col-md-3">
<button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button>
</div>
<div class="form-group col-md-7">
<label for="business-mng-name" class="control-label">Waste Stream</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling">
<span class="help-block"></span>
</div>
</div><!-- end row -->
<div class="row width-100">
<div class="form-group col-md-4">
<label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50">
<span class="help-block"></span>
</div>
<div class="form-group col-md-4">
<label for="business-mng-name" class="control-label">Weight (t)</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20">
<span class="help-block"></span>
</div>
<div class="form-group col-md-4">
<label for="business-mng-name" class="control-label">Cost ($)</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400">
<span class="help-block"></span>
</div>
</div><!-- end row -->
</div><!-- end row-waste container -->
流1
清除废物流
废物流
体积(m3)
重量(吨)
成本(元)
您需要更改单击事件处理程序,以处理动态附加的html
用下面的代码更新删除单击处理程序
$("body").on('click' , '.deleteWasteStream' , function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
您需要更改click事件处理程序以处理动态附加的html 用下面的代码更新删除单击处理程序
$("body").on('click' , '.deleteWasteStream' , function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
您不能在动态对象/html上使用。单击()。您可以使用.on()
文档:您不能使用。在动态对象/html上单击()。您可以使用.on()
文档:由于元素是动态创建的,因此它们不会像预呈现元素(在浏览器中加载网页时呈现的元素)一样在DOM中注册。最好的解决方案是使用
事件绑定器上的将动态创建的元素绑定到预渲染的元素
$('.row-cont-main').on('click','.deleteWasteStream',function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
由于元素是动态创建的,因此它们不会像预呈现元素(在浏览器中加载网页时呈现的元素)一样在DOM中注册。最好的解决方案是使用
事件绑定器上的将动态创建的元素绑定到预渲染的元素
$('.row-cont-main').on('click','.deleteWasteStream',function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
可能的重复可能的重复