javascript - El archivo JS no funciona en la vista parcial después de que se actualizó

Esta es una pregunta derivada de "El archivo Js no se carga después de que la vista parcial se actualiza". El problema es que si pongo mi script en la vista principal, no funciona en la parcial. Mi script personalizado:

$(function() {
    $.ajaxSetup({ cache: false });
    var timer = window.setTimeout(function () {
        $(".alert").fadeTo(1000).slideUp(1000, function () {
            $(this).hide();
        });
    }, 3000);
    $("[data-hide]").on("click", function () {
        if (timer != null) {
            clearTimeout(timer);
            $(this).closest("." + $(this).attr("data-hide")).hide();
        }
    });
});

La vista parcial de la foto donde necesito usar mi script:

<div class="well">
    <h3>
        <strong>@Model.Name</strong>
        <span class="pull-right label label-primary">@Model.AverageRaiting.ToString("# stars")</span>
    </h3>
    <span class="lead">@Model.Description</span>
    @Html.DialogFormLink("Update", Url.Action("UpdatePhoto", new {id = @Model.PhotoId}), "Update Photo", Url.Action("Photo"))
    @Html.Action("InitializeAlerts")
</div>

Y vista parcial "_Alert" que se renderiza en la parcial donde necesito usar el script anterior:

@{
    var alerts = TempData.ContainsKey(Alert.TempDataKey)
                ? (List<Alert>)TempData[Alert.TempDataKey]
                : new List<Alert>();

    if (alerts.Any())
    {
        <hr />
    }
    foreach (var alert in alerts)
    {
        var dismissableClass = alert.Dismissable? "alert-dismissable" : null;
        <div class="alert [email  fade in @dismissableClass">
            @if (alert.Dismissable)
            {
                <button type="button" class="close" aria-label="close" data-hide="alert">&times;</button>
            }
            @Html.Raw(alert.Message)
        </div>
    }
}

Respuesta #1

Usa un gestor de eventos delegado:

$(document).on('click', "[data-hide]", function () 

El selector de jQuery solo se ejecuta en el momento del evento, por lo que funcionará con elementos agregados dinámicamente.

Funciona escuchando el evento en un elemento ancestro que no cambia (document es la opción predeterminada más segura si no hay nada más cercano/conveniente). Luego aplica el selector a los elementos en la cadena de burbujeo. Después aplica tu función manejadora de eventos solo a los elementos coincidentes que causaron el evento.

Esto es muy eficiente en comparación con conectar manejadores de eventos a elementos individuales y cualquier diferencia de velocidad es despreciable ya que simplemente no puedes hacer clic lo suficientemente rápido como para notarla :)

Respuesta #2

Esto ocurre porque has eliminado los elementos del DOM a los que jQuery había adjuntado sus eventos. jQuery no realiza un seguimiento de la página ni agrega nuevos eventos cuando agregas nuevos elementos, es algo que sucede una sola vez. Puedes solucionar esto colocando el evento en un elemento padre que siempre exista en la página y luego usar un selector para acceder a los elementos que deseas. La documentación de jQuery para el método .on() te ofrece más información.

Necesito modificar el código de la siguiente manera:(funciona bien si se actualiza la vista parcial)

var item_to_delete;
    $("#serviceCharge").on('click','.deleteItem' ,function (e) {
        item_to_delete = $(this).data('id');
        alert(item_to_delete);
    });

Mi código anterior era: (funcionaba hasta que la vista parcial no se actualizaba)

var item_to_delete;
        $(".deleteItem").click(function (e) {
            item_to_delete = $(this).data('id');
        });