Laravel8+JS动态追加textarea后字数统计失效问题求助

功能异常表现：

核心问题分析 #

1. 重复ID导致DOM选择错误
   动态生成的所有textarea都用了id="professional_statement"，字数统计的span也都用了id="charNum1"。HTML要求ID全局唯一，$(crow).find('#professional_statement')只会匹配当前容器内第一个带该ID的元素，后续新增的组件无法被正确选中，直接导致统计功能失效。

2. 逻辑错误

   • 单词数判断条件错误：else if (split > 501)中，split是分割后的字符串数组，应该用统计出的单词数count进行判断。
   • 冗余的数值拼接：0 + count完全没必要，直接使用count即可。
   • textarea属性误用：min/max是针对数字输入框的属性，对textarea无效，应只保留minlength/maxlength（注意当前代码中textarea设置的是字符数限制，但统计逻辑是单词数，二者逻辑不匹配，建议后续统一）。

修复后的代码 #

1. 修改动态生成代码（替换重复ID为类名） #

把重复的ID改为类名，确保每个组件能被精准定位：

for (var i = 0; i < data.length; i++) {
  if (data[i]['program_category'] != 'Professional') {
    var purpose_statement = data[i]["purpose_statement"] === 'null' ? "" : data[i]["purpose_statement"];
            
    var wcounter = '<p><span class="charNum1">0</span> Word out of <b class="charNum">500</b></p>';

    $('#ProfessionalStatementContainer').append(`<label class="mb-0">Purpose statement for ` + data[i]["program_category"] + `</label> <div class="form-row mt-1">
      <div class="form-group col-12 col-md-12 mb-2">
      <input type="hidden" value="` + data[i]["program_id"] + `" name="app_prog_id[]">
      <textarea onkeyup="countChar(this)" class="form-control professional_statement" minlength="2700" maxlength="3500" rows="5" name="professional_statement[]" placeholder="Enter text here">` + purpose_statement + `</textarea>
      ` + wcounter + `
    
      </div>
      </div>`);
  } else {
    $('#ProfessionalStatementContainer').append(`<label class="mb-0">Purpose statement for ` + data[i]["program_category"] + `</label>`);
    $('#ProfessionalStatementContainer').append('<p class="mb-3">Professional summary is not required for professional category</p>');
    }
  }

2. 修复字数统计函数 #

更新DOM选择器为类名，修正逻辑错误，同时优化父容器定位：

function countChar(param) {
    var $crow = $(param).closest('.form-group'); // 用closest更精准定位当前组件的父容器
    var des = $(param).val(); // 直接获取当前触发事件的textarea的值，无需额外查找
    console.log(des);
    
    var count = 0;
    var split = des.split(' ');
    for (var i = 0; i < split.length; i++) {
        if (split[i].trim() !== "") { // 加trim处理纯空格的"空单词"
            count++;
        }
    }

    var $charNum1 = $crow.find('.charNum1');
    if (count < 301) {
        $("#enablesavebtn").hide();
        $charNum1.css("color", "red").text(count);
    } else if (count > 501) { // 修正为用count判断单词数
        $charNum1.text(count);
        $("#enablesavebtn").show();
        $charNum1.css("color", "green");
    } else {
        $charNum1.text(count);
        $("#enablesavebtn").show();
        $charNum1.css("color", "green");
    }
};

额外优化建议 #

• 统一统计逻辑：当前textarea设置的是2700-3500字符限制，但统计的是单词数，建议明确需求后统一逻辑（比如要统计字符数，直接用des.length替代单词统计逻辑）。
• 改用事件委托：动态生成的元素可以用事件委托替代内联onkeyup，避免代码耦合，示例：

  $(document).on('keyup', '.professional_statement', function() {
      countChar(this);
  });
  

  同时移除textarea标签里的onkeyup="countChar(this)"。
• 初始化统计：动态生成带有内容的textarea后，主动调用一次countChar来初始化字数显示，避免初始状态统计数为0。

内容的提问来源于stack exchange，提问作者Eishwar patley