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

Question

我正在研究一个正常的bootstrap主题，其中包含js滑块，弹出窗口，文本旋转，砌体框等。

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

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

这是用于文本循环的js / ajax：在下面的示例中，我必须调用“$（'。text-rotation'）。owlCarousel”以使文本循环正常工作。

    function getCon(type,id)
    {
        var postData = { id: id, type: type}
        $.ajax({
            url : 'getcontent.php',
            type : 'post',
            data : postData,                
            success : function( resp ) { 
                var cont = $('#cont', resp).html();

                $('#conta').after(cont);

                $('.text-rotation').owlCarousel({
                    loop: true,
                    dots: false,
                    nav: false,
                    margin: 10,
                    items: 1,
                    autoplay: true,
                    autoplayHoverPause: false,
                    autoplayTimeout: 3800,
                    animateOut: 'zoomOut',
                    animateIn: 'zoomIn'
                });
            }               
        });
    }

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

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

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

我试图从ajax成功中的“getScript”函数调用main.js但是没有工作..

Answer 1

最简洁的答案是不。

jQuery代码作用于代码运行时存在的DOM;如果您稍后添加到DOM，则没有任何通用的方法可以让jQuery代码返回并对新元素进行操作，就像它们首先出现在那里一样。

你的选择是

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