使用MVC5 C＃和Razor在局部视图中运行javascript

我使用Razor引擎在MVC5和C＃中有一个小型Web应用程序。 在我的代码中，我有一个主视图，它是一个表的索引，带有一些按钮。 当我单击其中一个按钮时，会出现一个Bootstrap模式。

到目前为止一直很好，但问题是我想在点击模态上的按钮时执行某些操作，但没有任何反应。

这是主要观点：

  
Package List
  

这是我通过使用jQuery显示模态的方式：

  //Show Edit Package modal $(".btn.btn-default.editPackage").click(function () { $.ajax({ url: $(this).data('url'), type: 'GET', cache: false, success: function (result) { $('#editModal').html(result).find('.modal').modal({ show: true }); } }); return false; //prevent browser defualt behavior }); 

到现在为止还挺好。 一切正常。 问题来自模态……

这是模式：

 
 
 
 
 
Edit Package MyPackage
 
 
 
 
 Package Name: 
  
 
  
 
 
 Close Save changes 
 
 
  

这是我希望在单击模态中的按钮时运行的Javascript：

 $(document).ready(function() { $("#savePackageChangesBtn").click(function() { $('.modal').modal({ show: true }); return false; //prevent browser defualt behavior }); }); 

主视图位于名为“Index.cshtml”的文件中。 模态视图是一个名为“_EditModal.cshtml”的文件（因为它是局部视图）。 javascript代码是一个名为“custom.js”的文件，在主视图中使用并运行完美。

为什么这不起作用？

Answer 1

你的模态是动态添加的，但你的$("#savePackageChangesBtn").click(function()是在DOM就绪时间注册的（当目标元素不存在时要绑定）。

如果添加了alert($("#savePackageChangesBtn").length); 在单击处理程序之前它将返回0。

使用委托的事件处理程序，附加到不变的祖先元素。

例如

 $(document).on('click', "#savePackageChangesBtn", function() 

这通过监听事件冒泡到不变的祖先，然后在事件时间而不是事件注册时应用jQuery选择器。 这意味着只有在发生单击时才需要存在该元素。

您通常会选择一个靠近加载内容的不变元素，因此可能使用#editModal而不是document

例如

 $('#editModal').on('click', "#savePackageChangesBtn", function() 

注意：如果没有其他方便的话， document是最好的默认值，但不要使用'body'作为样式可能导致它不响应冒泡的鼠标事件（例如，如果计算的body高度为零）。

Answer 2

添加$("#savePackageChangesBtn").click(function() {}); 显示模态后的代码

例如

 //Show Edit Package modal $(".btn.btn-default.editPackage").click(function () { $.ajax({ url: $(this).data('url'), type: 'GET', cache: false, success: function (result) { $('#editModal').html(result).find('.modal').modal({ show: true }); $("#savePackageChangesBtn").click(function () { $('.modal').modal({ show: true }); return false; //prevent browser defualt behavior }); } }); return false; //prevent browser defualt behavior }); 

或者将以下内容添加到您的document.ready中

 $(document).on("click", "#savePackageChangesBtn", doSomething); 

这使您的文档可以侦听init之后创建的元素。

在doSomething中添加你想要的东西。