Il file JS non funziona in visualizzazione parziale dopo l'aggiornamento

Question

Questa è una domanda di settore "Js file not loaded after partial view is refreshed". Il problema è che se metto il mio script nella vista principale non funziona in modo parziale. mio script personalizzato:

$(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(); 
     } 
    }); 
}); 

The Photo parziale vista in cui ho bisogno di usare il mio 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> 

E vista partail "_Alert", che rende per la parziale dove ho bisogno di usare lo script sopra:

@{ 
    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 alert-@alert.AlertStyle fade in @dismissableClass"> 
      @if (alert.Dismissable) 
      { 
       <button type="button" class="close" aria-label="close" data-hide="alert">&times;</button> 
      } 
      @Html.Raw(alert.Message) 
     </div> 
    } 
} 

Answer 1

Utilizzare un gestore di eventi delegato:

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

Il selettore jQuery viene eseguito solo al momento dell'evento, in modo che funzioni con elementi aggiunti dinamicamente.

Funziona ascoltando l'evento su un elemento di antenato non modificabile (il documento è l'impostazione predefinita più sicura se nient'altro è più vicino/conveniente). Quindi applica il selettore agli elementi della catena a bolle. Quindi applica la funzione del gestore di eventi solo agli elementi corrispondenti che hanno causato l'evento.

Questo è molto efficiente rispetto alla connessione di gestori di eventi a singoli elementi e la differenza di velocità è trascurabile come semplicemente non si può cliccare abbastanza veloce per notare :)

Answer 2

Questo accade aver rimosso gli elementi DOM che jQuery allegato sua eventi a. jQuery non tiene traccia della pagina e aggiunge nuovi eventi quando aggiungi nuovi elementi, si tratta di un accordo unico. È possibile aggirare questo ponendo l'evento su un genitore che esiste sempre sulla pagina e quindi utilizzare un selettore per ottenere gli elementi che si desidera. La documentazione di jQuery per il metodo .on() ti dice di più.

ho bisogno di modificare il codice come segue: (funziona bene se vista parziale aggiornato)

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

Il mio codice precedente era: (lavorare fino vista parziale si aggiorna)

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