Question

我有以下代码：

  var supportOnInput = 'oninput' in document.createElement('input');

  $("input[maxlength], textarea[maxlength]").each(function() {
    var $this = $(this);
    var maxLength = parseInt($this.attr('maxlength'));
    $this.attr('maxlength', null);

    var el = $("<span class=\"character-count label bg-success\">" + maxLength + "</span>");
    el.insertAfter($this);

    $this.bind(supportOnInput ? 'input' : 'keyup', function() {
      var cc = $this.val().length;
      el.text(maxLength - cc);
      if(maxLength < cc) {
        el.addClass("bg-danger");
      } else {
        el.removeClass("bg-danger");
      }
    });
  });

问题是需要考虑动态生成的输入元素。将bind更改为on并不一定能解决问题，因为问题出在each迭代器中。有没有一个聪明的解决方案让它工作？

更新

为了详细解释这个问题，我有一个评论表单接受一定长度的输入。上面的脚本对字段的长度执行客户端验证。它通常工作正常，但如果字段本身是动态生成的（例如，通过AJAX添加的帖子有一个需要此验证的注释字段），它就不起作用。我认为它发生在$.each()迭代器函数中，因为它只在页面加载时查看当前存在的元素，并且它不受.on()的限制。所以，我的问题是，更换上述代码的最聪明方法是什么，以便它可以使用动态生成的元素？

Answer 1

使用.on()：

var supportOnInput = 'oninput' in document.createElement('input');

$('body').on( supportOnInput ? 'input' : 'keyup', ".maxlength", function() {
    // do your stuff here
});

注意选择器是按类.maxlength

Answer 2

我通过将其变成插件来解决这个问题。

(function($) {


$.fn.lilCharacterCount = function() {
    var supportOnInput = 'oninput' in document.createElement('input');
    var $this = $(this);
    var maxLength = parseInt($this.attr('maxlength'));
    var $counter = $("<span class=\"character-count label bg-success\">" + maxLength + "</span>");
    $counter.insertAfter($this);

    $this.on(supportOnInput ? 'input' : 'keyup', function() {
      var charCount = $this.val().length;

      $counter.text(maxLength - charCount);
      if(maxLength <= charCount) {
        $counter.removeClass("bg-success");
        $counter.addClass("bg-danger");
      } else {
        $counter.removeClass("bg-danger");
        $counter.addClass("bg-success");
      }
    });
  }
}(jQuery));

Answer 3

我认为您需要从.each（）中删除绑定并使用它：

以下是处理“.on”的摘录：

事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）时，它们必须存在于页面上。

我相信这对你来说不是一个选择。尝试使用“.delegate”。

 $( "body" ).delegate("input[maxlength], textarea[maxlength]", 
             supportOnInput ? 'input' : 'keyup', function( event ) {
    // do your stuff
 });

jQuery $ .each中的动态元素

3 个答案: