3

可能重复：
使用 jquery 和 HTML 5 加载新部件时，javascript 在新部件中不起作用

我使用 Ajax 将另一个 HTML 页面加载到主 HTML 页面的 div 中。页面加载正常，但是当我尝试将 jQUery 应用于加载的页面时，没有任何效果。

$('.mainDiv').click(function(ev) {
    ev.preventDefault();
    var url = $(this).attr('href');
    $('.secondDiv').load('http://127.0.0.1:8000'+url);
});

我尝试使用在所有链接上调用的简单警报函数来查看它是否有效，但警报仅出现在主页链接上，即使 .js 文件链接到两个页面也是如此。

$('a').click(function(){
    alert('hey');
});

我怎样才能解决这个问题？使用 .live() 或 .on() 而不是 .load() 会解决问题吗？

4

3 回答 3

6

使用$('body').on('click', 'a', function(event){...})会起作用。

因为on被调用，所以<body>您不必担心在加载新内容时事件会被清除。

如果您想将此事件的范围限定在一组特定的锚点上，我建议在第二个参数中使用类的名称间距，例如

$('body').on('click', '.mainDiv .secondDiv a', function(event){...})

通过在引导程序中设置一次，您可以减少代码中的很多复杂性。现在您需要做的就是加载内容；由于您已提取事件逻辑，因此无需定义内联回调。

$('a').on(...)将无法工作，因为它绑定的 DOM 元素可能会被清除，或者在调用时不在页面上。调用的第二个参数on用于引用出现在根元素下的任何新元素（body在本例中）。

于 2012-11-01T19:44:56.707 回答
1

这是你需要做的：

$('.secondDiv').on('click', 'a', function() {
    alert('hey');
});

所以基本上每个在 secondDiv 中加载的动态锚标签都会自动绑定到这个函数。否则你可以做的是：

$('.secondDiv').load('http://127.0.0.1:8000'+url, function(){
    $(this).find('a').click(function(){
        alert('hey');
    });    
});

但是，如果第一个适合您，我不会建议您使用后者。

于 2012-11-01T19:46:41.443 回答
0

我同意 Kevin B 的观点，$.ajax() 在这里可能会更好。然后你可以在回调中设置你的点击事件。

$.ajax({
   url: 'http://127.0.0.1:8000'+url,
   dataType: 'html',
   succcess: function(data){
      $('.secondDiv').append(data);
      $('.secondDiv a').click(function(){
         alert('hey');
      });
   }
});
于 2012-11-01T19:56:08.160 回答