jQuery只运行一次

Question

这个问题有一个简单的解决方案。我有部分视图的索引页。部分视图包含指向其他视图的链接列表，“返回列表”链接将链接列表视为部分视图。此外，索引页面还有jQuery脚本，其中包含可防止页面重定向并将结果返回到局部视图的ajax脚本。所以，如果我第一次点击任何链接，结果会显示在索引页的部分视图中。然后我点击“返回列表”，然后点击任何链接，第二次脚本不工作，页面重定向。哪里不对？

下面是一个代码：

模型 “链表”：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace AjaxTest.Models 
{ 
    public partial class LinkList 
    { 
     public int id { get; set; } 
     public string label { get; set; } 
     public string method { get; set; } 
     public string controller { get; set; }   
     public string htmlLabel { get; set; } 
    } 
} 

控制器有以下代码：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using AjaxTest.Models; 

namespace AjaxTest.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult PartialView(int id) 
     { 
      ViewBag.Id = id; 
      return View(); 
     } 

     public ActionResult PartialsList() 
     { 
      List<LinkList> list = new List<LinkList>() 
      { 
       new LinkList{id = 1, label = "First partial", method = "PartialView", htmlLabel = "first-partial"}, 
       new LinkList{id = 2, label = "Second partial", method = "PartialView",htmlLabel = "second-partial"}, 
       new LinkList{id = 3, label = "Third partial", method = "PartialView", htmlLabel = "third-partial"} 
      }; 

      return View(list); 
     } 
    } 
} 

然后3视图页面PartialView.cshtml：

PartialsList.cshtml：

@model IEnumerable<AjaxTest.Models.LinkList> 

<div> 

    @foreach (var item in Model) 
    {    
     @Html.ActionLink(item.label, item.method, item.controller, new { id = item.id }, new { id = item.htmlLabel }) 
     <br /> 
    } 

</div> 

而且index.cshtml：

@{ 
    ViewBag.Title = "Index"; 
} 

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $('#first-partial').click(function (event) { 
      event.preventDefault(); 
      var url = $(this).attr('href'); 
      $('#pview').load(url); 
     }) 
     $('#second-partial').click(function (event) { 
      event.preventDefault(); 
      var url = $(this).attr('href'); 
      $('#pview').load(url); 
     }) 
     $('#third-partial').click(function (event) { 
      event.preventDefault(); 
      var url = $(this).attr('href'); 
      $('#pview').load(url); 
     }) 
     $('#backToList').click(function (event) { 
      event.preventDefault(); 
      var url = $(this).attr('href'); 
      $('#pview').load(url); 
     }) 
    }); 
</script> 

<h2>Index</h2> 

<div id="index"> 
    <fieldset> 
     <legend>Index</legend> 
     This is Index page! 
    </fieldset> 
</div> 
<div> 
    <fieldset> 
     <legend>Partials</legend> 
     <br /> 
     <fieldset>    
      <div id="pview"> 
       @Html.Action("PartialsList", "Home", null) 
      </div> 
     </fieldset> 
     <div> 
      @Html.ActionLink("Back to list", "PartialsList", "Home", null, new { id = "backToList" }) 
    </div> 
</fieldset> 
</div> 

Answer 1

如果你要绑定事件动态创建的元素：

$(document).on('click', 'yourSelector', function() { 
    console.log('Event occured'); 
    // Your event handler function call here 
}); 

jQuery的DOC：https://api.jquery.com/on/

https://stackoverflow.com/a/29728269/2025923

https://stackoverflow.com/a/29788126/2025923