AJAX重新加载后重新启动准备好的事件

Question

我研究了其他线程，只是感到困惑。

情况：我提供了一个通用的jQuery插件，用于加载用户通过AJAX动态指定的div。一切正常，但在例如一个用户的页面，有一块JS没有被调用，因为“ready”事件没有被刷新。

通常情况下，用户的其他jQuery的东西将被放置在jQuery（document）.ready之后。

我刚刚测试呼叫：

$(document).trigger('ready'); 

手动 - 它完全没有影响，因为我假定“准备”之称只有一次，只有一次。

处理它的正确方法是什么？ （这将是巨大的，提供最通用的解决方案可能）

我很乐意做这样的事情在这个线程建议：

Trigger $document.ready (so AJAX code I can't modify is executed)

但我认为，readyList现在是私人的，不会被直接操纵了吗？

值得一提的是，我所提供的插件为用户提供了回调功能。当然，（他）可以将加载后的处理JS代码放在那里。

提前感谢和亲切的问候

Answer 1

你不应该试图重新加载整个DOM就绪功能。如果你这样做，特别有害的是事件的n + n性质，例如，如果同一元素上的两个点击事件可能变成4，然后8等等，如果DOM准备功能被它们重复地重新发射的话。

您可以通过在您完成ajax调用后取出需要运行的代码来避免这种情况，并且可能希望您希望从要重新初始化的事件中受益的元素的总数。

$(document).ready(function() 
{ 
    initialise(); 

    //... Resume with DOM ready 
}); 

function initialise() 
{ 
    // create event here that needs re-initialising 
} 

因此，当你与你的Ajax调用完成再打电话initialise()。

或者看看使用.on并使用它的冒泡功能，这是我将如何处理这种问题。它避免了您必须考虑在脚本中重新初始化DOM准备好函数的任何部分。

附加从评论

.on允许你绑定事件的页面不随时更改，低层次的元素，同时允许你控制哪些动态元素的实际范围内的触发事件容器。

<div id="container"> 

    <div id="ajax-content"> 

     <a href="#" class="created-link">A new link</a> 

    </div> 

</div> 

所以我们知道<a>由DOM ready事件后一个Ajax功能创建的解雇，因此适用于它，然后任何直接的事件是行不通的。

相反，我们会将事件绑定到较低级别的未更改元素，并向上冒泡到包含动态DOM元素。

$('#container').on('click', '.created-link', function(event) 
{ 
    event.preventDefault(); 

    // Your normal onclick code 
}); 

Answer 2

它看起来喜欢与＃关联，因为href不起作用。请照顾这一点。 :)

Answer 3

只是为了分享我的发现和解决方案，我有同样的问题，在AJAX重新加载$（document）.ready函数不被称为 这个问题我已经使用了这两个答案的组合，最终发现了一个很简单的解决方案

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

我的解决方案看起来像这样

<script type="text/javascript"> 
function initialise(){ 
    $('.clickableItem').click(function(){ 
     /* do code here */ 
     return false; 
    }); 
}; 
$(document).ready(function(){ 
    initialise(); 
}); 
$(document).ajaxComplete(function() { 
    initialise(); 
}); 
</script> 

希望这可以帮助别人