动态字符剩余计数失效：新增行无法触发keyup事件求助

你遇到的核心问题是事件绑定的时机不对：页面初始化时调用$('textarea.char-textarea').remainingCharsCounter()，只会把focus和keyup事件绑定到当时已经存在于DOM里的textarea元素。而通过getStringForm动态生成并append的新元素，并没有被绑定这些事件，所以字符计数功能自然不生效。

有两种常用的解决思路，推荐第一种事件委托的方式，更简洁且一劳永逸：

方法1：修改插件为事件委托模式 #

事件委托利用DOM的事件冒泡机制，把事件绑定到一个始终存在的父元素（比如document或者页面加载时就有的容器），当动态添加的子元素触发事件时，父元素会捕获并处理。修改你的插件代码如下：

(function($) { 
  'use strict'; 
  $.fn.remainingCharsCounter = function() { 
    // 使用事件委托，将事件绑定到document，监听匹配当前选择器的元素事件
    $(document).on('focus keyup', this.selector, function() { 
      var $textarea = $(this);
      var maxLength = parseInt($textarea.attr('maxlength'), 10);
      var remainingChars = maxLength - $textarea.val().length;
      // 移除原代码里多余的.focus()，避免计数器span抢焦点干扰输入
      $textarea.next('.remainingChars').text(remainingChars); 
    }); 
    return this; // 保持jQuery链式调用的特性
  }; 
})(jQuery);

这样修改后，不管是页面初始的textarea，还是之后动态添加的，只要带有char-textarea类，都会自动触发字符计数，无需额外操作。

方法2：动态添加元素后手动初始化插件 #

如果不想修改插件，也可以在每次动态添加HTML后，对新元素手动调用插件初始化：

// 生成并添加新元素
var newFormHtml = getStringForm("subtest", 2); // 示例参数，根据你的实际场景调整
$('#Scores').append(newFormHtml);

// 对新添加的.char-textarea元素初始化插件
$('#Scores').find('.char-textarea:last').remainingCharsCounter();

如果一次性添加多个元素，可以直接选中所有目标元素调用插件，但要注意这种方式可能会重复绑定事件，所以还是第一种事件委托的方案更稳妥。

原插件代码里有个小问题：$(this).next('.remainingChars').text(remainingChars).focus();里的.focus()会让计数器的<span>获取焦点，这会干扰用户在textarea的输入操作，建议直接移除这部分。

内容的提问来源于stack exchange，提问作者Ottoh Hidayatullah