0

我有以下代码：

  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()。所以，我的问题是，替换上述代码的最聪明的方法是什么，它可以与动态生成的元素一起使用？

4

3 回答 3

0

我通过把它变成一个插件来解决这个问题。

(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));
于 2013-09-30T04:03:47.183 回答
0

使用.on()：

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

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

注意选择器是按类.maxlength

于 2013-09-19T22:14:47.907 回答
-1

我认为您需要从 .each() 中删除绑定并像这样使用它：

这是处理“.on”的摘录：

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

我相信这不会是你的选择。尝试使用“.delegate”。

 $( "body" ).delegate("input[maxlength], textarea[maxlength]", 
             supportOnInput ? 'input' : 'keyup', function( event ) {
    // do your stuff
 });
于 2013-09-19T22:48:02.340 回答