1

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

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

例如：

_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();

感谢您的任何提示，

约翰

4

2 回答 2

5

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

  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)
于 2012-08-27T19:27:27.280 回答
3

这可能为时已晚，但这就是我需要 ajax 时所做的。

$(document).ready(function () {
$(document.body).on('click', '.Selector_S', function () { function_F(event, this) })
}

function function_F(event, d){
...do sth here...
}

而且您根本不需要重新启动事件侦听器或在 ajax 函数中编写任何内容。

于 2013-07-12T19:28:34.870 回答