JQuery 事件不适用于 ASP.NET MVC 部分视图答案

【问题标题】：JQuery events don't work with ASP.NET MVC Partial ViewsJQuery 事件不适用于 ASP.NET MVC 部分视图
【发布时间】：2010-02-03 20:27:08
【问题描述】：

我正在尝试让 JQuery 事件与 ASP.NET MVC 中的部分视图一起使用。但是，在通过 Ajax 加载局部视图后，JQuery 似乎无法为局部视图中的任何元素触发事件。我怀疑如果您使用其他框架或 JavaScript 库通过 Ajax 加载部分 html 代码，也会发生此问题。

例如，考虑以下示例：

控制器：

 public class TestController : Controller
    {

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult LoadPartialView()
    {
        return View("PartialView");
    }
}

索引.aspx

     <script type="text/javascript">
         $(document).ready(function() {
             $("#button").click(function() {
                 alert('button clicked');
             });
         });   
     </script>    

     <div>
     <%using(Ajax.BeginForm("LoadPartialView", new AjaxOptions { UpdateTargetId="PartialView"})){ %>
        Click <input type="submit" value="here" /> to load partial view.
     <% } %>
     </div>
     <br /><br />
     <% Html.RenderPartial("PartialView"); %>

部分视图.ascx

<div id="PartialView">
   Click <input type="button" id="button" value="here"></input> to display a javascript message.
</div>

页面首次加载后，您可以单击“单击此处以显示 Javascript 消息”，您将收到一条 Javascript 警报消息，显示“按钮已单击”。但是，一旦您单击“单击此处加载部分视图”，单击应该带来 Javascript 警报消息的按钮就没有任何效果。似乎不再触发“点击”事件。

有谁知道为什么 JQuery 会出现这个问题以及如何解决？使用事件的其他 JQuery 插件也会出现此问题。

【问题讨论】：

标签： jquery asp.net-mvc ajax events

【解决方案1】：

我找到了解决办法：

Juste试着做：

$(document).on("click", "YOUR_SELECTOR", function(e){
  /// Do some stuff ...
});

而不是：

$("YOUR_SELECTOR").on("click", function(e){
  /// Do some stuff ...
});

【讨论】：

谢谢！！！这对我有用，是一个非常简单的解决方案。但是，我没有足够的知识来了解此方法与 .live() 方法之间的优缺点。
@Trunker .live() 已过时“从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 . delegate() 优先于 .live()。"
@PEOudin 感谢您的回答，它确实对我有用！奇怪的是，这个问题只发生在 MVC 5 中（在将 MVC 3 应用程序重构为 MVC 5 之后）。对于 MVC 3，"$("YOUR_SELECTOR").on(..." 版本确实可以正常工作。也许有人对此有解释？
@PeOudin 很好的答案，终于对我有用，我花了两个小时寻找答案！
Here 是类似的解决方案，如果您有在页面加载后加载动态内容的局部视图。希望对某人有所帮助。

【解决方案2】：

处理这个问题的最简单方法是使用 live() 方法：

<script type="text/javascript"> 
         $(document).ready(function() { 
             $("#button").live('click', function() { 
                 alert('button clicked'); 
             }); 
         });    
</script>

【讨论】：

太棒了。这确实有效。根据官方文档，live() 可用于将处理程序附加到与当前或将来匹配当前选择器的所有元素的事件。唯一的缺点是其他编写插件的人显然没有使用 live 方法。因此，要使其与现有插件一起使用，可能需要有人挖掘源代码并对其进行调整。
是的。或者在将内容添加到页面之后，您可以再次调用插件，而不仅仅是在页面加载时调用。如果答案足够，请将其标记为已接受...
此答案已过时，请参阅 PEOudin 的答案。

【解决方案3】：

<script>
   $(document).ready(function(){
      $("input[id^=button]").live('click', function() { 
               //Your Code     

    }); 
});
</script>

【讨论】：

【解决方案4】：

对我也有用的是将 jquery 的东西放在局部视图中。只需确保仅引用加载视图中的控件，否则您可能会得到一个为控件注册两次的处理程序。

PartialView.ascx：

<div id="PartialView">
   Click <input type="button" id="button" value="here"></input> to display a javascript message.
</div>
<script type="text/javascript">
     $(document).ready(function() {
         $("#PartialView").find("#button").click(function() {
             alert('button clicked');
         });
     });   
 </script>

【讨论】：

【解决方案5】：

这些解决方案都不适合我，所以我必须做这些事情才能工作：

我创建了一个局部视图并将我所有的 JavaScript 引用放在该文件中
我创建了一个这样的 div

<div id="js">
       @Html.Partial("[Your_Path]")
</div>

3.当我加载一些部分页面之后，我会在 JavaScript 中执行此操作：

$('#js').load('/Your_Controller/Your_Partial_function');

【讨论】：