使用 outerHTML 后的 Onclick 事件问题

Posted

技术标签:

【中文标题】使用 outerHTML 后的 Onclick 事件问题【英文标题】:Onclick event issue after using the outerHTML 【发布时间】:2014-08-18 05:38:59 【问题描述】:

这是代码:

$(".adauga_incasare").click(function()
       var html = $(".incasari")[0].outerHTML;
       $(html).insertAfter($(".incasari").last());
    );

    $(".del_incasare").click(function()
         alert("dsdasdasd");
    );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    			<div class="incasari">
    				<div class="data_incasare_container">
    					<label><b>Data</b></label>
    					<input class ="data_incasare" type="text" id="datepicker">
    					<label class ="data_incasare_hidden">12-06-2014</label>
    				</div>
    				<div class="suma_incasare_container" style="">
    					<label><b>Suma</b></label>
    					<input class="suma_incasare" type="text" maxlength="8" name="pret_unitar[]" > 
    					<label class ="suma_incasare_hidden">100</label>
    				</div>
    			    <div class="coscos" style="">
    			   	     <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash"></i></a>
    			   	     <div style="clear:both;"></div>	
    			   	     <div class ="incasare_action">
    				   	     <input class="btn btn-success" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
    				   	     <a href="javascript:void(0);" class="del_incasare delrow"></a>
    			   	 	 </div>
    			   	 	 <div style="clear:both;"></div>
    			    </div>
    			    <div style="clear:both;"></div>
    		    </div>
    
    		    <div style="clear:both;"></div>	
    			<a href="#" class="adauga_incasare">+ Adauga incasare noua</a>
    			<div class="toram">
    					<label style = 'cursor:default;'>Total incasat: <b>100 &euro;</b></label>
    					<label style = 'cursor:default;'>Total ramas: <b>1012 &euro;</b></label>
    			</div>		
    		</div>

outerHTML 工作正常,但是当我“克隆”类 incasari 之后,onclick 事件在克隆部分不起作用。我有一个删除按钮。在作品中的第一类“incasari”中,但在克隆类中却没有。为什么?

【问题讨论】:

【参考方案1】:

使用Event Delegation,因为您的元素是在分配点击事件后动态创建的。例如,委托给文档:

Demo

$(document).on("click", ".del_incasare", function()
    alert("dsdasdasd");
);

这意味着.del_incasare选择器将检查所有点击,如果匹配,则该函数将运行,无论元素何时创建。

【讨论】:

还是不行。我试过这个版本: $('.incasari:last').clone(true).insertAfter('.incasari:last');它有效,但我不明白为什么 @Chester 您应该尝试在jsFiddle 或类似名称中复制,因为这是正确答案。 .clone(true) 将克隆 html 元素及其附加的事件处理程序,因此它在这里工作正常。【参考方案2】:

您用来触发点击事件的方法仅适用于页面加载期间创建的 DOM 元素,动态创建的 DOM 元素不会被此方法处理。 对于页面加载后或动态创建的元素,您必须使用事件委托。为此使用jQuery on 方法。

$(document).on("click", ".del_incasare", function()
    // do some cool stuff here.
);

您可以在此处使用任何父元素而不是文档,在页面加载期间已在 DOM 中。

【讨论】:

以上是关于使用 outerHTML 后的 Onclick 事件问题的主要内容,如果未能解决你的问题,请参考以下文章

什么时候应该在 JavaScript 中使用 outerHTML? [关闭]

无法使用 javascript 更改 outerHTML

outerHTML 和属性更新

如何使用 jQuery 设置 outerHTML

使用自定义 HTML 标签并用 outerHTML 替换自定义标签好吗?

jQuery outerHTML 关闭标签