jquery插件绑定ajax load元素

Question

这是我的jquery代码，它的工作原理。但是我有一个问题，如果ajax加载一个新输入，这个输入对我的mylimit不起作用。怎么解决？感谢。

(function ( $ ) {

    $.fn.mylimit = function() { 

        return this.each(function(){
            var $this = $(this);

            if ($this.attr('limit_count') && $this.attr('message')) {
                var limit_count = $this.attr('limit_count');
                var message = $this.attr('message');
                $this.on('keyup', function(){
                    var count = $this.val().length;
                    if(count > limit_count) {
                        alert(message);
                    }
                });
            }
        });  
    };

    $('input').mylimit();

}( jQuery ));

的 JSFiddle: http://jsfiddle.net/lighter/BuaY4/16/

Answer 1

1）修复现有代码

您有许多输入错误（例如limit-count不是您的属性之一，而limit-message是一个）。 count > limit中引用的变量为limit，但您将其称为limit_count：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/BuaY4/13/

(function ( $ ) {

    $.fn.mylimit = function() { 

        return this.each(function(){
            var $this = $(this);

            if ($this.attr('limit').length && $this.attr('limit-message').length) {
                var limit = $this.attr('limit');
                var message = $this.attr('limit-message');
                $this.on('keyup', function(){
                    var count = $this.val().length;
                    if(count > limit) {
                        alert(message);
                    }
                });
            }
        });  
    };

    $('input').mylimit();

}( jQuery ));

2。处理动态加载的内容：

您需要弄清楚如何引用尚不存在的对象。您可以在Ajax加载后重新运行插件，或使用委托事件处理程序（如果可能，首选）。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/BuaY4/18/

jQuery(function ($) {
    $(document).on("keyup", "input", function () {
        var $this = $(this);
        if ($this.attr('limit').length && $this.attr('limit-message').length) {
            var limit = $this.attr('limit');
            var message = $this.attr('limit-message');
            console.log("Limit: " + limit);
            var count = $this.val().length;
            if (count > limit) {
                alert(message);
            }
        }
    });
});

这使用委托事件处理程序（on的特殊变体）。它监听事件冒泡到一个不变的祖先（document是默认的，如果你没有一个方便），它然后应用jQuery过滤器，它然后< / em>为导致事件的每个匹配元素调用函数。

备注：

• jQuery(function($){ YOUR CODE HERE });是一个特殊的快捷方式，它既是DOM就绪事件处理程序，也为您提供了一个本地范围的$变量。非常方便：）
• 没有必要将此功能实现为插件（例如$.fn.mylimit =，因为它不能应用于动态加载的内容（您请求的）。只需包含代码，它将适用于所有输入你的属性。