jQuery 只运行一次

Question

这个问题有一个简单的解决方案。我有部分视图的索引页。局部视图包含 link 列表到另一个视图，"Back to List" link 将 link 列表获取到局部视图中。索引页也有 jQuery 脚本和 ajax 防止页面重定向和 returns 导致部分视图。因此，如果我第一次单击任何 link，结果将显示在索引页面的部分视图中。然后我单击 "Back to List"，然后单击任何 link 第二次脚本不起作用并且页面重定向。怎么了？

这是一个代码：

型号"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:

This is partial view with id = (@ViewBag.Id)

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 文档：https://api.jquery.com/on/

jQuery 只运行一次

jQuery runs only once

ajax

asp.net-mvc

jquery

partial-views