时间戳

首页 > 解决方案 > 使所有 JavaScript 在 ajax 内容上正常工作

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

问题描述

我正在研究一个普通的引导主题，其中包含 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，但没有工作..

标签： javascriptjqueryajax

解决方案

最简洁的答案是不。

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

你的选择是

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

推荐阅读