刷新后，JS文件在部分视图中不起作用

这是“ 刷新部分视图后未加载Js文件 ”的分支问题。 问题在于，如果我将我的脚本放入主视图中，则它不能部分工作。 我的自定义脚本：

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

Photo部分视图，我需要使用我的脚本：

 
 
 @Model.Name @Model.AverageRaiting.ToString("# stars") 
 @Model.Description @Html.DialogFormLink("Update", Url.Action("UpdatePhoto", new {id = @Model.PhotoId}), "Update Photo", Url.Action("Photo")) @Html.Action("InitializeAlerts")  

并且部分视图“_Alert”渲染到我需要使用上面脚本的部分：

 @{ var alerts = TempData.ContainsKey(Alert.TempDataKey) ? (List)TempData[Alert.TempDataKey] : new List(); if (alerts.Any()) { 
 } foreach (var alert in alerts) { var dismissableClass = alert.Dismissable? "alert-dismissable" : null; 
 @if (alert.Dismissable) { × } @Html.Raw(alert.Message) 
 } } 

Answer 1

使用委托事件处理程序：

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

jQuery选择器仅在事件时运行，因此它将与动态添加的元素一起使用。

它通过在不变的祖先元素上侦听事件来工作（如果没有其他更接近/方便的话，文档是最安全的默认值）。 然后，它将选择器应用于气泡链中的元素。 然后，它将您的事件处理函数仅应用于导致该事件的匹配元素。

与将事件处理程序连接到单个元素相比，这是非常有效的，并且任何速度差异都可以忽略不计，因为您根本无法快速点击通知:)

Answer 2

这是因为您删除了jQuery附加其事件的DOM元素。 jQuery不会跟踪页面并在添加新元素时添加新事件，这是一次性交易。 您可以通过将事件放在页面上始终存在的父项上然后使用选择器来获取所需的元素来解决此问题。 .on（）方法的jQuery文档告诉你更多。

我需要修改代码如下:(如果部分视图刷新，则运行良好）

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

我以前的代码是:(工作到部分视图不刷新）

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