热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AjaxLoaded内容的JQueryEvent绑定-JQueryEventbindingofAjaxLoadedcontent

IamtryingtogetJQuerytoworkondynamicallyloadedcontentthroughajaxwitheventbinding,sim

I am trying to get JQuery to work on dynamically loaded content through ajax with event binding, similar to this: Event binding on dynamically created elements?

我试图让JQuery通过带有事件绑定的ajax来处理动态加载的内容,类似于:动态创建元素的事件绑定?

However, I am not that good with java/Jquery and I cant seem to get jquery to work on the ajax content. I started with this code:

但是,我对java / Jquery不太好,我似乎无法让jquery处理ajax内容。我从这段代码开始:

(function($){
function floatLabel(inputType){
        $(inputType).each(function(){
            var $this = $(this);
            var text_value = $(this).val();

            // on focus add class "active" to label
            $this.focus(function(){
                $this.next().addClass("active");
            });

            // on blur check field and remove class if needed
            $this.blur(function(){
                if($this.val() === '' || $this.val() === 'blank'){
                    $this.next().removeClass();
                    }
            });

            // Check input values on postback and add class "active" if value exists
            if(text_value!==''){
                $this.next().addClass("active");
                }
            });
    // Automatically remove floatLabel class from select input on load
    //$( "select" ).next().removeClass();
}
// Add a class of "floatLabel" to the input field
floatLabel(".floatLabel");
});

And I tried to bind the events like this:

我试图绑定这样的事件:

(function($){
    var $this = $('.floatLabel');
    var text_value = $('.floatLabel').val();
$('.container').on('focus', '.floatLabel', function floatLabel(inputType){
    $(inputType).each(function(){
        $this.next().addClass('active');
        if(text_value!==''){
            $this.next().addClass('active');
        }
    });
});
$('.container').on('blur', '.floatLabel', function floatLabel(inputType){
        $(inputType).each(function(){
            if($this.val() === '' || $this.val() === 'blank'){
                $this.next().removeClass();
        }
        });
    });
})(jQuery);

And this is the main html page:

这是主要的html页面:

Content loaded:

1 个解决方案

#1


This seems to be solved with $(document).ajaxComplete (function (){ and just duplicating the original code. Thanks for the help everyone!

这似乎是通过$(document).ajaxComplete(function(){和只复制原始代码来解决的。感谢大家的帮助!


推荐阅读
author-avatar
手机用户2502894791
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有