页面加载后自动执行.on()函数

Question

$("#container").on("click", contentEffects);在ajax调用之后,我用来使一些jquery代码再次工作.但是,我希望该.on()功能可以在页面加载后立即自动执行,并且不会click发生事件.那可能吗？

请看看我的网站和javascript文件:

http://peters-playground.com/blog.html

https://github.com/P233/p233.github.com/blob/master/js/script.js#L30-L78

当ajax加载新帖子时,我必须点击帖子内容才能启用javascript,我还需要点击两次按钮才能使其正常工作.这真的很烦人.我该如何避免这个问题？

谢谢!

Answer 1

你可以在你的链中运行它:

// Anonymouse function passed into $ will be invoked
// When the document has loaded
$(function () {

    // Immediately after binding the click handler
    // We invoke the click event on #container
    $("#container").on("click", contentEffects).click();

});

听起来你应该考虑的是事件委托,并将事件绑定到页面加载时出现的最近的静态祖先元素.例如,假设我们有一个由AJAX动态填充的项目列表:

<ul id="items">
    <li>First item on load.</li>
    <!-- More items will be loaded
         via AJAX later on --->
</ul>

您可能希望列表项在您单击时执行某些操作,因此您可能会将处理程序绑定到其click事件:

$("#items li").on("click", function () {
    alert( $(this).html() );
});

这适用于页面上已有的任何列表项,但正如您所遇到的那样,新项目不会绑定到它们,因此在您的AJAX之后,您必须将其重新绑定到所有新列表项.

我们可以绑定到ul始终存在的元素,而不是这样做,而只是监听源自li元素的事件:

$("#items").on("click", "li", function () {
    alert( $(this).html() );
});

现在我们的事件永远不需要重新绑定,因为#items它加载了页面,而且永远不会去任何地方.将捕获并处理从嵌套列表项(无论是否通过AJAX加载)冒泡到此元素的任何单击事件.