Question

可能重复：
javascript not working in the new part when loading a new part using jquery and HTML 5

我使用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（）可以解决这个问题吗？

Answer 1

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

由于在on上调用了<body>，因此您无需担心在加载新内容时事件会被删除。

如果你想将这个事件的范围放在一组特定的锚点上，我会建议在第二个参数中使用类似

之类的名称间距

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

通过在引导程序中设置一次，可以降低代码中的大量复杂性。现在您需要做的就是加载内容;您已经提取出事件逻辑，因此无需在内联中定义回调。

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

Answer 2

这是你需要做的：

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

但如果第一个适合你的话，我不建议你使用后者。

Answer 3

我同意Kevin B的观点，$ .ajax（）可能会更好。然后，您可以在回调中设置Click事件。

$.ajax({
   url: 'http://127.0.0.1:8000'+url,
   dataType: 'html',
   succcess: function(data){
      $('.secondDiv').append(data);
      $('.secondDiv a').click(function(){
         alert('hey');
      });
   }
});

通过ajax加载页面时，Javascript不起作用

3 个答案: