Question

我使用$("#container").on("click", contentEffects);使一些jquery代码在ajax调用后再次运行。但是，我希望.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();

});

你应该考虑的是 event-delegation ，并将事件绑定到页面加载时最近的静态祖先元素。例如，假设我们有一个由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加载）都将被捕获并处理。

Answer 2

使用此代码在页面加载后执行.on函数。

$(document).ready(function() {
         $("#container").on("click", function() {
         //Your Code
         });
});

页面加载后自动执行.on（）函数

2 个答案: