1

我正在使用 Google Maps API 并且有很多 html 通过使用 .html() 等的脚本注入。我设置了一些触发器来选择注入的那些元素，但由于 HTML 不是准备好'或'加载'它，它无法选择。

我以为一个简单的$(window).load就可以了，但似乎没有。

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

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

我使用的是 .on，而不是 .live()，但我也猜测这将是正确的方法。我添加了警报（）；只是为了测试我的代码，但可惜它仍然没有加载。

有任何想法吗？

谢谢，R

4

3 回答 3

2

编辑：

$('#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");
});

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

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

于 2013-10-03T12:48:14.510 回答
0

  1. jquery 使用不同的方法来确保 dom 已准备好，所以不要$(window).load使用：

    $( document ).ready(function() {
  // Handler for .ready() called.
});

  2. 使用 on 时，页面加载时你要绑定的容器必须存在，所以如果你想绑定一个a动态添加的点击事件，你需要绑定on非动态的容器：

    $('ul.campaign-list li').on('click','a', function (e) {
    $("html, body").animate({ scrollTop: "300px" });
    alert("Scrolls");
});
于 2013-10-03T12:51:35.840 回答
0

您不应该使用$(window).load在 DOM 加载后要运行的代码，使用$(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- 假设该ul元素在加载时出现在页面的 HTML 中。

旧.live()电话相当于做：

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

如果这有帮助

于 2013-10-03T12:53:08.613 回答