jQuery代码第一次工作，第二次只在页面刷新后工作

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

– 第一次点击分页中的页面链接时，jquery代码工作，并且ajax查询被调用好。

– 当我点击分页页面的链接时，seconde时间被忽略，jcery代码被忽略，并且分页中的链接作为一个简单的链接工作，好像没有jquery代码。

 {% for entity in entities %} //... {% endfor %} {{ knp_pagination_render(entities) }} 
  $(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); }; });  

Answer 1

如上所述，这是因为您正在动态加载内容; 您的活动尚未受此内容约束。

尝试改变

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

至

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

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

Answer 2

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

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

这会将事件附加在更高的元素上，该元素在被删除和插入以及丢失附加事件时不会随时间而变化。 事件将被委托给随时间动态变化的元素。

Answer 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/

有关更多说明，您还可以看到此问题的答案jQuery.on（）如何工作？