JS file does not work in partial view after update

Question

This is a question of the branch " Js file that does not load after updating partial viewing ." The main problem is that if I put my script in the main view, this does not work in partial. My custom script:

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

Partial view of the photo where I need to use my 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> 

And viewing the partail "_Alert" to be passed to the partial, where I need to use the script above:

 @{ 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 [e-mail] 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

Use a delegated event handler:

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

The jQuery selector is only triggered during the event, so it will work with dynamically added elements.

It works by listening to the event in the unchanging element of the ancestor (the document is the safest by default, if nothing is closer / more convenient). He then applies the selector to the elements in the bubble chain. Then it applies the event handler function only to the corresponding elements that triggered the event.

This is very effective compared to attaching event handlers to individual elements, and any speed difference is negligible, as you simply cannot click fast enough to notice :)

Answer 2

This happens when you remove the DOM elements to which jQuery has bound your events. jQuery does not track the page and does not add new events when adding new elements, this is a one-time deal. You can get around this by placing the event on the parent object that always exists on the page, and then use the selector to get the elements you need. The jQuery documentation for the .on () method tells you more.

I need to change the code as follows: (works well if the partial view is updated)

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

My previous code: (work until partial view is not updated)

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