javascript - pagina - Jquery Event no se activará después de la llamada ajax

sweet alert bootstrap

Question

Este es un problema bastante extraño con jquery. Estoy cargando un div

<div id="container">

en la carga de la página. Cada registro es datos tabulares con una función ''eliminar'' ajax asociada a él. Cuando la página se carga y hace clic en el enlace ''eliminar'', la llamada ajax se desactiva muy bien. Sin embargo, una vez que se activa el evento, los datos se devuelven desde la llamada ajax, y el div se rellena con datos (pero la página no se actualiza o recarga). Cuando hago clic en el enlace nuevamente, el script ajax no se activa. Aquí está mi código:

$(document).ready(function() {
    $("button.done").button({
    }).click(function() {
        var BatchID = $("input#BatchID").val();
        var Amount = $("input#Amount").val();
        var Name = $("input#CheckName").val();
        var Check_Number = $("input#Check_Number").val();
        var Company = $("select#Company").val();
        var Department = $("select#Department").val();
        $.ajax({
            type: ''GET'',
            url: ''/app/usagCheckEntryWS.html'',
            data: {
                "BatchID" : BatchID,
                "Amount" : Amount,
                "Name" : Name,
                "Check_Number" : Check_Number,
                "Company" : Company,
                "Department" : Department
            },
            success: function (data) {
                    var ang = '''';
                    var obj = $.parseJSON(data);
                    $.each(obj, function() {
                       ang += ''<table><tr><td width="45">'' + this["RefID"] + ''</td><td width="140">'' + this["Name"] + ''</td><td width="95">'' + this["CheckNumber"] + ''</td><td align="right" width="70">$'' + this["Amount"] + ''</td><td width="220" style="padding-left: 15px;">'' + this["Description"] + ''</td><td><div class="delete" rel="'' + this["RefID"] + ''"><span>Delete</span></div></td></tr></table>'';
                    });
                    $(''#container'').html(ang);
                    $("input#Amount").val('''');
                    $("input#CheckName").val('''');
                    $("input#Check_Number").val('''');
                    $("select#Company").val(''MMS'');
                    $("th#dept").hide();
                    $(''input#CheckName'').focus();
            }
        });
    });
});

Answer 1

Cuando elimina un elemento y lo reemplaza (mediante javascript), pierde los enlaces de eventos que se le agregaron en la carga de la página.

(Esto también se aplica al contenido agregado a la página después de la carga de la página, es decir, contenido cargado ajax)

Hay varias soluciones posibles para esto.

1) Encapsule su código de "enlace" y llámelo tanto en la carga de la página como inmediatamente después de que el elemento en cuestión se agregue nuevamente a la página. Por ejemplo:

$(document).ready(function(){
    // bind event handlers when the page loads.
    bindButtonClick();
});

function bindButtonClick(){
    $(''.myClickableElement'').click(function(){
        ... event handler code ...
    });
}

function updateContent(){
    $.ajax({
        url : ''/ajax-endpoint.php'',
        data : {''onMyWay'' : ''toServer''},
        dataType : ''html'',
        type : ''post'',
        success : function(responseHtml){
            // .myClickableElement is replaced with new (unbound) html element(s)
            $(''#container'').html(responseHtml);

            // re-bind event handlers to ''.myClickableElement''
            bindButtonClick();  
        }
    });
}

2) La manera más elegante de manejar esto : use el método .on () de jQuery . Con él, puedes vincular manejadores de eventos a elementos distintos al objetivo del evento, es decir, un elemento que nunca se elimina de la página.

$(document).ready(function(){
    $(''body'').on(''click'',''.myClickableElement'',function(){
        ... event handler code ....
    });
});

Alguna otra explicación:

El método .on() usa la delegación de eventos para decirle a un elemento padre que retenga su código de controlador de eventos (tercer argumento) y lo active cuando el objetivo del evento (segundo argumento) tenga un determinado tipo de evento (primer argumento) realizado en él.

Si está utilizando una versión de jQuery anterior a la 1.7 use el método de delegate ahora en desuso, que esencialmente hace lo mismo.

Además, vale la pena señalar que debido a la forma en que los eventos "burbujean" a través del árbol dom, el objetivo del evento (segundo argumento del método .on ()) debe ser un descendiente del elemento delegante (selector del objeto jQuery). Por ejemplo, lo siguiente NO funcionaría

<div id="container-1">
    <div>
        <div id="another-div">
            Some Stuff
        </div>
    </div>
</div>

<div id="container-2">
    <a id="click-me">Event Target!!!</a>
</div>

<script type="text/javascript">
    $(''#container-1'').on(''click'',''#click-me'',function(){
        ... event handler code ....
    });
</script>

El body o los elementos del document suelen ser opciones seguras, ya que normalmente cada elemento de la página es descendiente.

Answer 2

Puede encerrar el script de evento en DIV y ejecutar un comando Reemplazar después de cargar dinámicamente el contenido.

<div class="somescript">
-- Event Script that you want to map with dnamically added content
<div>

- Cargue dinámicamente su contenido y ejecute el siguiente comando después de él.

$(".somescript").replaceAll($(".somescript"));

Una vez que se cargue el contenido cargado dinámicamente y se haya ejecutado el comando de reemplazo, los eventos se mapearán y el código se ejecutará correctamente.