jQuery 代码第一次有效，第二次仅在页面刷新后有效

Question

我有一个jquery代码来加载页面中的数据。此代码中有关分页的部分在第一次时有效，第二次仅在页面刷新后才不起作用。

-当我第一次单击分页中的页面链接时，jquery 代码可以正常工作，并且 ajax 查询可以正常调用。

-第二次单击分页页面的链接时，jquery 代码将被忽略，分页中的链接将作为简单链接工作，就好像没有 jquery 代码一样。

<div id="mydiv">
   {% for entity in entities %}
    //...
   {% endfor %}

{{ knp_pagination_render(entities) }}

</div>


    <script>
    $(document).ready(function () {

        $("ul#pagination a").on('click', function (e) {
            e.preventDefault();

            $('ul#pagination li.active').removeClass("active");

            var route = $(this).attr('href');

            window.history.pushState(null, "Title", route);

            return loadPage(route);

        });

        function loadPage(route) {
            $.ajax({
                type: 'get',
                dataType: 'html',
                url: route,
                success: function (msg) {
                    if (msg === undefined) {
                        alert('error');
                    }
                    else {
                        $('#mydiv').html(msg);
                    }
                }
            });

        }

        window.onpopstate = function () {
            loadPage(window.location.href);
        };

        });
</script>

Answer 1

如上所述，这是因为您正在动态加载内容；您的事件尚未绑定(bind)到此内容。

尝试改变

$("ul#pagination a").on('click', function (e) {

至

$(document).on('click', "ul#pagination a", function (e) {

这会将事件绑定(bind)到动态创建的元素。