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>

Answer 3

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

    }); 
});
</script>

Answer 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>

Answer 5

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

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

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

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

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

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

5 个答案: