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

<分区>

Possible Duplicate:
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() 会解决问题吗？

最佳答案

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

因为 on在 <body> 上调用您无需担心加载新内容时事件会消失。

如果您想将此事件的范围限定在一组特定的 anchor 上，我建议在第二个参数中使用类似

的类来命名间距

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

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

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

关于jquery - 通过 ajax 加载页面时，Javascript 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13184326/

上一篇：html - 为什么 "display: table-cell"弄乱了我的 div？

下一篇：html - iframe 正文删除空间

相关文章：

jQuery 根据值调用函数？

javascript - 全选/取消全选 - 复选框和表格数据

javascript - Ionic 3 - Pan 事件在手机上丢失 "target"

html - css悬停以清除背景上的线性渐变失败

php - 如何使用正则表达式替换字符串的外部内容？

jquery - 如何选择直系后裔的直系后裔

javascript - 使用ajax发帖没有得到任何响应

php - 如何在 PHP 和 Mysql 中将字符串值传递给 ajax

php - Ajax选择控制PHP MySQL？

jquery - 背景图像 div 隐藏 jquery 幻灯片