使所有JavaScript都能正常处理Ajax内容

时间:2018-10-06 16:24:52

标签: javascript jquery ajax

我正在研究一个普通的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函数上对它们进行编码。

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

我试图从ajax成功内的“ getScript”函数调用main.js,但无法正常工作。.

1 个答案:

答案 0 :(得分:1)

简短的答案是:不。

jQuery代码对代码运行时存在的DOM起作用;如果稍后再添加到DOM,则jQuery代码没有任何通用的方法可以回过头来对新元素进行操作,就好像它们首先就在其中一样。

您的选择是

  1. 重写代码以不依赖于事件绑定/对基于AJAX的内容的操纵-而是对始终存在的元素使用委托的事件绑定
  2. 将您的主要代码初始化推迟到所有AJAX调用完成之后,因此添加绑定时DOM已经存在
  3. 编写特定的代码以添加必要的事件绑定/在加载新添加的DOM块时分别对其进行修改