javascript - Problema del evento Onclick después de usar el outerHTML

jquery replace text

Question

este es el código 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>

Y este es el código javascript:

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

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

el outerHTML funciona bien, pero cuando "clono" la clase incasari después de eso, cuando el evento onclick no funciona en la parte del clon. Tengo un botón de borrar. En la primera clase "incasari" en obras, pero en la clase de clonación no funciona. Por qué ?

Answer 1

El método que utilizaste para disparar el evento click solo funciona con los elementos DOM que se crearon durante la carga de la página, los elementos DOM creados dinámicamente no serían manejados por este método. Para los elementos creados después de cargar la página o dinámicamente, debe usar la Delegación de evento. Para este uso jQuery en el método.

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

Puede usar cualquier elemento principal en lugar de documento aquí, que ya estaba en DOM durante la carga de la página.

Answer 2

Use la delegación de eventos porque su elemento se crea dinámicamente después de que se haya asignado el evento click. Por ejemplo, para delegar en el documento:

Manifestación

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

Esto significa que todos los clics serán verificados por el selector .del_incasare , y si coincide, la función se ejecutará, independientemente de cuándo se haya creado el elemento.