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

【问题标题】：jQuery code works the first time and the second time works only after page refreshjQuery 代码第一次有效，第二次只在页面刷新后有效
【发布时间】：2015-12-01 02:17:30
【问题描述】：

我有一个 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>

【问题讨论】：

Event binding on dynamically created elements?的可能重复
ul#pagination 在 #mydiv 内吗？
可能是因为它是动态生成的。像...$(document).on('click', 'ul#pagination a', function(e){...
是的，ul#pagination 在分页中<ul class="pagination" id="pagination">
«return loadPage(route);»的作用是什么？

标签： jquery ajax

【解决方案1】：

如前所述，这是因为您正在动态加载内容；您的活动尚未绑定到此内容。

尝试改变

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

到

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

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

【讨论】：

【解决方案2】：

如果这些链接是动态插入的，您可能希望使用事件委托来附加事件。

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

这会将事件附加到更高的元素上，该元素不会随着时间的推移而改变，只要被删除和插入并丢失附加的事件。并且该事件将被委托给随时间动态变化的元素。

【讨论】：

【解决方案3】：

您应该在动态生成 dom 元素上绑定事件时使用$(document).on(events,selector,handler)。我认为以下代码可以解决您的问题。

 $(document).on('click','#ul#pagination a',function(e){
        e.preventDefault();
        $('ul#pagination li.active').removeClass("active");
        var route = $(this).attr('href');
        window.history.pushState(null, "Title", route);
        return loadPage(route);
});

详情您也可以查看此链接http://api.jquery.com/on/

如需更多说明，您还可以查看此问题的答案How does jQuery.on() work?

【讨论】：