jQuery запускается только один раз

Question

Существует простое решение этой проблемы. У меня есть индексная страница с частичным представлением. частичный вид содержит список ссылок на другие виды, ссылку «Назад к списку», которая получает список ссылок на частичный вид. Также на индексной странице есть сценарий jQuery с ajax, который предотвращает перенаправление страницы и возвращает результат на частичный вид. Итак, если я нажму ссылку на первый раз, результат отобразится на частичный просмотр страницы Index. Затем я нажимаю «Назад к списку» и нажимаю любую ссылку во второй раз, когда скрипт не работает и перенаправляет страницу. что не так?

Вот код:

модель "LinkList":

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