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

I use $("#container").on("click", contentEffects);使一些 jquery 代码在 ajax 调用后再次工作。不过，我希望.on()函数可以在页面加载后立即自动执行，并且无需click事件。那可能吗？

请看一下我的网站和 javascript 文件：

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

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

当新帖子通过ajax加载时，我必须单击帖子内容以启用javascript，并且我还需要单击按钮两次才能使其工作。这真的很烦人。我怎样才能避免这个问题？

谢谢你！

您可以在您的链中运行它：

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

您可能希望列表项在单击它们时执行某些操作，因此您可能会将处理程序绑定到它们的单击事件：

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

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

我们可以绑定到ul元素，它始终存在，并且只需侦听源自li要素：

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

现在我们的事件永远不需要重新绑定，因为#items与页面一起加载，并且永远不会去任何地方。任何从嵌套列表项（无论是否通过 AJAX 加载）冒泡到此元素的单击事件都将被捕获和处理。