Question

这个问题有一个简单的解决方案。我有部分视图的索引页面。局部视图包含指向另一个视图的链接列表，“返回列表”链接可获取部分视图中的链接列表。索引页面还有带有ajax的jQuery脚本，它可以防止页面重定向并将结果返回到局部视图。因此，如果我第一次单击任何链接，结果将显示在索引页面的部分视图中。然后我单击“返回列表”，并在第二次脚本不工作时单击任何链接并重定向页面。怎么了？

这是一段代码：

模型“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 DOC：https://api.jquery.com/on/

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

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

jQuery只运行一次

1 个答案: