Question

我正在使用Google Maps API，并且使用.html（）等通过脚本注入大量html。我设置了一些触发器来选择那些注入的元素，但是因为HTML不是't'准备'或'加载'它，它无法选择。

我认为一个简单的$(window).load会起作用，但似乎不是。

到目前为止，这是我的代码：

$(window).load(function(){
    $('ul.campaign-list li a').on('click', function (e) {
        $("html, body").animate({ scrollTop: "300px" });
        alert("Scrolls");
    });
});

我使用.on，而不是.live（），但我也猜测这是正确的方法。我添加了alert（）;只是为了测试我的代码，但唉它仍然没有加载。

有什么想法吗？

谢谢， [R

Answer 1

修改

$('#container_12').on('click', 'a', function(){ $('html, body').animate({ scrollTop: 300 }, 500); });

在聊天讨论之后，我们确定了问题并对其进行了相应修改，我将保留原来的答案，以便帮助人们处理此类问题。

使用.on()以使其适用于动态内容时，您需要指定容器或上下文：

$('ul.campaign-list li a').on('click', function (e) { $("html, body").animate({ scrollTop: "300px" }); alert("Scrolls"); });

成为：

$(window).on('click', 'ul.campaign-list li a', function (e) { $("html, body").animate({ scrollTop: "300px" }); alert("Scrolls"); });

请注意，您可以将窗口替换为任何未动态添加的容器。

有关更详细的说明，请参阅.on()文档。

Answer 2

jquery使用不同的方法来确保dom准备就绪，因此不使用$(window).load：
```
$( document ).ready(function() {
  // Handler for .ready() called.
});
```
使用时，加载页面时必须存在要绑定的容器，因此如果要将单击事件绑定到动态添加的a，则需要绑定on到非动态的容器：
```
$('ul.campaign-list li').on('click','a', function (e) {
    $("html, body").animate({ scrollTop: "300px" });
    alert("Scrolls");
});
```

Answer 3

在加载DOM后，您不应将$(window).load用于要运行的代码，而是使用$(document).ready(function(){...})或快捷方式$(function(){...})。此外，您的.on()来电仅适用于您拨打电话时存在的元素。我猜你真正想要的是这样的：

$(function() {
  $('ul.campaign-list').on('click', 'li a', function (e) {
    $("html, body").animate({ scrollTop: "300px" });
    alert("Scrolls");
  });
});

当点击与li a匹配的元素中的ul.campaign-list选择器匹配的任何内容时，将触发此操作 - 假设加载时页面的HTML中存在ul元素。 / p>

旧.live()来电相当于：

$(document).on("click", "ul.campaign-list li a", function(ev) { ... });

如果有帮助

关于通过Javascript创建的元素的jQuery

3 个答案: