重新启动事件监听器javascript/jquery

Question

我有一个页面,其中的内容通过ajax引入.我遇到的问题是在加载内容后添加相关的事件侦听器.有没有办法告诉浏览器再次从头部运行所有脚本？

下面是一个从页面头部运行的代码的简单示例,显然任何与通过AJAX引入的".RRCustomizeBox .customize"匹配的新html元素都不会有以下click事件.

例如:

_vvdCMS.kklsRegions = {

    init: function (){
        $(document).ready(function(){

            $('.RRCustomizeBox .customize').click( function(){
                _vvdCMS.kklsRegions.showRRCustoms(this);
            });

        });
    },

    showRRCustoms: function(obj) {
        var objParent = $(obj).parent();
        objParent.find('.RRCustomizeBoxForm').fadeIn(700);
    }
}
_vvdCMS.kklsRegions.init();

谢谢你的提示,

约翰

Answer 1

您可以将所有初始化代码放在一个函数中,并从两个位置调用该函数:

1. 在document.ready()中
2. 加载新内容后

例如:

function initDynamicEventHandlers() {
    // set up your event handlers here
}

$(document).ready(initDynamicEventHandlers);

$(whatever).load(url, initDynamicEventHandlers)

您必须确保未替换的任何内容都不会安装多个事件处理程序.

或者,第二个选项,对于某些类型的逻辑(如鼠标和键事件),您可以使用委托事件处理并在附加到未替换的静态父对象时安装事件处理,并且事件处理将在不更改的情况下工作你的动态内容会在下面发生变化.

为此,您使用委托的形式.on():

$(static parent object selector).on('click', dynamic object selector, fn)