Question

我正在尝试更新从jquery-1.7.1迁移到jquery-3.1.1的项目。我正在创建用于分页的页面链接，此代码到目前为止一直运行良好：

$(".page-link").live("click", function (e) {
        e.preventDefault();

        var currentPage = $(this).attr("page");
        $("#CurrentPage").val(currentPage);
        articles.search();
    });

现在，我尝试更新此代码，并且正在执行此操作，但是它不起作用：

$(document).on("click", ".page-link", function (e) {

        e.preventDefault();

        var currentPage = $(this).attr("page");
        $("#CurrentPage").val(currentPage);
        articles.search();
    });

你能帮我我在做什么错吗？

这是我的整个js文件：

var articles = {
    init: function () {
        $(document).on("click", ".page-link", function (e) {

            e.preventDefault();

            var currentPage = $(this).attr("page");
            $("#CurrentPage").val(currentPage);
            articles.search();
        });


        $(document).on("keydown", "#SearchKeyword", function (event) {
            var key = event.keyCode || event.charCode;

            if (key == 13) {
                $("#SearchKeyword").change();
                event.preventDefault();
            }
        });

        $(document).on("change", "#SearchKeyword", function () {
            if ($("#CurrentPage").length) {
                $("#CurrentPage").val(1);
            }
            articles.search();
        });
    },
    search: function () {
        var url = "/Articles/PagedArticles";
        var postdata = $("#postform").serialize();

        $.post(url,
            postdata,
            function (data) {
                $("#Results").html(data);
            });
    }
};

$(function () {
    articles.init();
});

当我单击页面链接时，我仅将Hashtag添加到和的网址中，如下所示：http://localhost:58893/Articles#，但分页不起作用

在此先感谢您的帮助

'''

@model AutoParts.Domain.Models.ArticleEditResultsViewModel
@using AutoParts.Domain.Helpers;
@using AutoPartsWeb.HtmlHelpers

@{
    var isAdministrator = User.IsInRole("administrator");
}


@Html.PageLinks(Model.PagingInfo)

@if (Model.Results.Count == 0)
{
    <div class="panel panel-default">
        <div class="panel-body">
            No Data.
        </div>
    </div>
}
else
{
    <table id="articles" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th>
                    #
                </th>
                <th>
                    Brand
                </th>
                <th>
                    Article
                </th>
                <th>
                    Number
                </th>
                <th>
                    Brend replace
                </th>
                <th>
                    Number Replace.
                </th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Results)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Brand)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Article)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Number)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.BrendReplace)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.NumberReplace)
                    </td>
                    <td>
                        @if (!string.IsNullOrEmpty(item.ImagePath))
                        {
                            <img src="@Url.Content("~/ImageUploads/" + item.ImagePath)" width="150" />
                        }
                    </td>
                    <td>
                        @if (isAdministrator)
                        {
                            <a href="/Articles/Edit/@item.Id" class="btn-lg" title="Article Info"><span class="glyphicon glyphicon-info-sign"></span></a>
                        }
                    </td>
                </tr>
            }
        </tbody>

    </table>
}

<script type="text/javascript">


    $(document).ready(function () {

        var responsiveHelper_dt_Locations = undefined;


        var breakpointDefinition = {
            tablet: 1024,
            phone: 480
        };

        $('#articles').dataTable({

            "bFilter": false,
            "bPaginate": false,
            "bInfo": false,
            "autoWidth": true,
            "preDrawCallback": function () {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_Locations) {
                    responsiveHelper_dt_Locations = new ResponsiveDatatablesHelper($('#dt_Locations'), breakpointDefinition);
                }
            },
            "rowCallback": function (nRow) {
                responsiveHelper_dt_Locations.createExpandIcon(nRow);
            },
            "drawCallback": function (oSettings) {
                responsiveHelper_dt_Locations.respond();
            }
        });
    })

</script>

'''

这是我的PagingHelper

    public static class PagingHelper
    {
        private static readonly int displayPages = 5;

        public static MvcHtmlString PageLinks(this HtmlHelper html, PagingInfo pagingInfo)
        {
            return PageLinks(html, pagingInfo, "text-right");
        }

        public static MvcHtmlString PageLinks(this HtmlHelper html, PagingInfo pagingInfo, string cssClass)
        {
            StringBuilder result = new StringBuilder();

            // CurrentPage hidden field
            var currentPage = new TagBuilder("input");
            currentPage.MergeAttribute("type", "hidden");
            currentPage.MergeAttribute("id", "CurrentPage");
            currentPage.MergeAttribute("name", "CurrentPage");
            currentPage.MergeAttribute("value", pagingInfo.CurrentPage.ToString());

            result.AppendLine(currentPage.ToString());

            if(pagingInfo.TotalPages <= 1)
                return MvcHtmlString.Create(result.ToString());

            var ulInnerTextBuilder = new StringBuilder();

            //<div class="text-right">
            var div = new TagBuilder("div");
            div.AddCssClass(cssClass);

            //<ul class="pagination pagination-sm">
            var ul = new TagBuilder("ul");
            ul.AddCssClass("pagination pagination-sm");

            string link = string.Empty;
            #region first page and previous page links

            if (pagingInfo.CurrentPage != 1)
            {
                // li first page
                // <li><a href="#">&laquo;</a></li>
                link = CreateLink(@"&laquo;", 1, false);
                ulInnerTextBuilder.Append(link);

                // li previous page
                // <li><a href="#">&lsaquo;</a></li>
                link = CreateLink(@"&lsaquo;", pagingInfo.CurrentPage - 1, false);
                ulInnerTextBuilder.Append(link);
            }

            #endregion

            #region page links

            int fromPage = (pagingInfo.CurrentPage % displayPages) == 0
                ? (pagingInfo.CurrentPage / (displayPages + 1)) * displayPages
                : (pagingInfo.CurrentPage / displayPages) * displayPages;
            int toPage = Math.Min(fromPage + displayPages, pagingInfo.TotalPages);
            for (int i = fromPage + 1; i <= toPage; i++)
            {
                // li page
                // <li><a href="#">i</a></li>
                link = CreateLink(i.ToString(), i, i == pagingInfo.CurrentPage);
                ulInnerTextBuilder.Append(link);
            }

            #endregion

            #region next page and last page links

            if (pagingInfo.CurrentPage != pagingInfo.TotalPages)
            {
                // li next page
                // <li><a href="#">&rsaquo;</a></li>
                link = CreateLink(@"&rsaquo;", pagingInfo.CurrentPage + 1, false);
                ulInnerTextBuilder.Append(link);

                // li last page
                // <li><a href="#">&raquo;</a></li>
                link = CreateLink(@"&raquo;", pagingInfo.TotalPages, false);
                ulInnerTextBuilder.Append(link);
            }

            #endregion

            ul.InnerHtml = ulInnerTextBuilder.ToString();
            div.InnerHtml = ul.ToString();
            result.Append(div.ToString());

            return MvcHtmlString.Create(result.ToString());
        }

        private static string CreateLink(string text, int page, bool active)
        {
            // li page
            // <li><a href="#">i</a></li>
            var li = new TagBuilder("li");
            var a = new TagBuilder("a");
            a.MergeAttribute("href", "#");
            a.MergeAttribute("page", page.ToString());
            a.InnerHtml = text;
            if (active)
            {
                li.AddCssClass("active");
            }
            else
            {
                a.AddCssClass("page_link");
            }

            li.InnerHtml = a.ToString();

            return li.ToString();
        }
    }

Answer 1

以这种方式编写函数，它将起作用。

$(".page-link").on("click", function (e) {

    e.preventDefault();

    var currentPage = $(this).attr("page");
    $("#CurrentPage").val(currentPage);
    articles.search();
});

也以此方式编写其他功能

$("id/class").on("change", function (e) {

});

$("id/class").on("focusin", function (e) {

});

$("id/class").on("focusout", function (e) {

});

$("id/class").on("keyup", function (e) {

});

以此类推

Answer 2

我不知道为什么有人可以解释这件事很重要，但是当我将引号“更改为点击事件中的撇号后，它就开始起作用了？？

$(document).on('click', ".page-link", function (e) {
            e.preventDefault();

            var currentPage = $(this).attr("page");
            $("#CurrentPage").val(currentPage);
            articles.search();
        });

将问题从jquery-1.7.1迁移到jquery-3.1.1

2 个答案: