使所有 JavaScript 在 ajax 内容上正常工作

Question

我正在开发一个普通的引导主题，其中包含 js 滑块、弹出窗口、文本旋转、砖石框等。

主题包含所有相关的js库和main.js

所有这些都将通过 ajax 在用户指定的操作上加载新内容。

这里是文本旋转的 js/ajax： 在下面的示例中，我必须调用“$('.text-rotation').owlCarousel”才能使文本旋转正常工作。

函数getCon（类型，id） { var postData = { id：id，类型：类型} $.ajax({ 网址：'getcontent.php'， 类型：'发布'， 数据：postData， 成功：函数（resp）{ var cont = $('#cont', resp).html(); $('#conta').after(cont); $('.text-rotation').owlCarousel({ 循环：真， 点：假， 导航：错误， 边距：10， 项目：1， 自动播放：是的， 自动播放悬停暂停：假， 自动播放超时：3800， animateOut: '缩小', animateIn: '放大' }); } }); }

当不调用“$('.text-rotation').owlCarousel”时，它只是以列表格式显示文本。

为了使所有 ajax 加载内容在所有部分（即滑块、弹出窗口等）上正常工作。我必须找到相关的主题函数并将它们全部编码到相应的 ajax 函数上。

我是否可以在 ajaxComplete 上调用任何预定义的 js 代码，以便所有 ajax 内容在页面加载时正常工作？？

我尝试从 ajax 成功内的“getScript”函数调用 main.js，但不工作..

Answer 1

简短的回答是：不。

jQuery 代码作用于代码运行时存在的 DOM；如果您稍后添加到 DOM，则 jQuery 代码没有任何通用的方法可以返回并处理新元素，就好像它们一开始就在那里一样。

你的选择是

1. 重写您的代码，使其不依赖于事件绑定/对基于 AJAX 的内容的操作 - 而是对始终存在的元素使用委托事件绑定
2. 将您的主代码初始化推迟到所有 AJAX 调用完成之后，这样当您添加绑定时 DOM 就已经到位了
3. 编写特定代码以添加必要的事件绑定/在加载时单独修改新添加的 DOM 块