-1

我曾经$("#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，并且我还需要单击两次按钮才能使其工作。这真的很烦人。我怎样才能避免这个问题？

谢谢！

4

2 回答 2

7

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

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

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

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

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

我们可以不这样做，而是绑定到ul始终存在的元素，并简单地监听源自li元素的事件：

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

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

于 2013-04-18T16:17:40.180 回答
0

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

$(document).ready(function() {
         $("#container").on("click", function() {
         //Your Code
         });
});
于 2013-04-18T16:27:54.820 回答