在 ajax 加载后加载容器事件

Load container events after ajax load

本文关键字:加载 事件 ajax      更新时间:2023-09-26

#

更新:请参阅问题末尾的答案

#

我遇到以下问题:

我创建了一个函数来加载在特定事件上加载的所有事件/插件。当页面最初加载时,它会加载到"body"上,当进行 ajax 调用时,然后调用内容加载到的容器。

(function($){
    $.fn.defaultFormValues = function(){
        return this.each(function(){
            var element = $(this);
            var defaultValue = element.attr("default");
            var currentValue = element.val();
            // This will make sure not to replace exisitng values
            if( !currentValue ) {
                element.val( defaultValue ).addClass('input-before-focus');
            }
            else if( currentValue == defaultValue ) {
                element.addClass('input-before-focus');
            }
            element.unbind('focus').bind('focus', function() {
                if( element.val() == defaultValue ) {
                    element.val('').removeClass('input-before-focus');
                }
            });
            element.unbind('blur').bind('blur', function() {
                var currentVal = element.val();
                if( currentVal == '' ) {
                    element.val(defaultValue).addClass('input-before-focus');
                }
            });
        }); // end function
    };
})( jQuery );
(function($){
    $.fn.loadEvents = function(){
        return this.each(function(){
            var containerObj = $(this);
            $("input[default], textarea[default]",containerObj).defaultFormValues();
        });
    };
})( jQuery );

我像这样加载初始调用:

$("body").loadEvents();

当 ajax 容器被加载时,它会加载如下事件:

container.loadEvents();

由于某种原因,这些事件不适用于 ajax 调用。

任何帮助将不胜感激。

亚历山大

好的,我能够找出问题。每当您使用 container.replaceWith(...) 时,对元素"container"的引用不再可用,因为它已被删除并替换为该元素的新实例。

这是一个我只是错过的逻辑项目,以防万一任何一个遇到同样的问题。

亚历山大

如果您使用load()或其他插入方法添加新的修饰符...插入这些元素后,您需要调用方法。

最简单的情况是

$('#content').load('path/to/server',function(){
/* new content exists, can bind event handlers to it*/
  $(this).loadEvents()
});