小编典典

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

ajax

我有一个页面,其中通过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();

谢谢你的提示

约翰


阅读 329

收藏
2020-07-26

共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)
2020-07-26