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

Question

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

例如,请考虑以下示例:

控制器:

 public class TestController : Controller
    {

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

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

的Index.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"); %>

PartialView.ascx

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

页面首次加载后,您可以单击"单击此处以显示Javascript消息",您将收到一条Javascript警告消息,其中显示"单击按钮".但是,一旦单击"单击此处加载部分视图",单击应该带来Javascript警报消息的按钮就没有任何效果.似乎'click'事件不再被触发了.

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

Answer 1

我找到了一个解决方案:

Juste尝试制作:

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

代替 :

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

Answer 2

处理此问题的最简单方法是使用live()方法:

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