Question

这是html代码：

<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[]" alt=""> 
                    <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>

这是javascript代码：

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

$(".del_incasare").click(function(){
     alert("dsdasdasd");
});

外部HTML工作正常，但是当我克隆＆＃34;之后的类 incasari ，当onclick事件对克隆部分不起作用时。我有一个删除按钮。在头等舱＆＃34; incasari＆＃34;在工作中，但在克隆类中它没有。为什么？

Answer 1

使用Event Delegation因为您的元素是在分配了click事件后动态创建的。例如，委托给文档：

<强> Demo

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

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

Answer 2

用于触发click事件的方法仅适用于在页面加载期间创建的DOM元素，此方法不会处理动态创建的DOM元素。对于页面加载后或动态创建的元素，您必须使用事件委派。对于此使用jQuery on方法。

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

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

使用outerHTML后的Onclick事件问题

2 个答案: