javascript - 如何在 php 代码之间添加 jquery 字数统计和限制

Question

我有一个用于文本区域计数的代码。它工作得很好，但是一旦我像下面所做的那样嵌入它，它就不起作用并且不会抛出错误。我已经坚持了3天多了。请提供一些帮助，我将不胜感激。

<div class="row">

    <label for="name" class="control-label">
    <?php if(isset($data['career_objective']) && $data['career_objective']!=''){?>
          <p id="c_obj" class="text-info first " data-type="textarea" name="comments2"  onclick="return update('c_obj' ,'career_obj' ,'Career Objective'); "><?php echo $data['career_objective']; ?></p>
          <br>
          Word Count : <span id="display_count">0</span> words. Words left : <span id="word_left">50</span>
    <?php } else { ?>
          <p id="c_obj" class="text-info first " data-type="textarea" name="comments2" onclick="return update('c_obj' ,'career_obj' ,'Career Objective'); ">Career Profile and Work objectives here. Not more than 50 words.</p>
    <?php }?>
    </label>
<div class="controls">
    <a href="#" class="btn pen c_obj1"><span class="glyphicon redcolor first" aria-hidden="true">Edit</span></a>
</div> </div>

Jquery部分

$("#c_obj").on('keyup', function() {
var words = this.value.match(/\S+/g).length;
if (words > 50) {
  // Split the string on first 200 words and rejoin on spaces
  var trimmed = $(this).val().split(/\s+/, 50).join(" ");
  // Add a space at the end to make sure more typing creates new words
  $(this).val(trimmed + " ");
  alert("You reached your limit of 50 words.");
}
else {
  $('#display_count').text(words);
  $('#word_left').text(50-words);
} });

Answer 1

从下面的 html 元素中，我非常确定您正在使用第三方库来创建一个 textarea 元素，以便以编程方式获取用户输入。

<p id="c_obj" class="text-info first " data-type="textarea" name="comments2" ...

现在，$('#c_obj').on(.. 在 p 标记上绑定(bind)事件，而不是在您要检查字数的 textarea 元素上。原因可能是文本区域尚不存在，或者是在用户启动操作后动态创建的。

解决方案:

在主体或父元素上绑定(bind)一个事件，并将 keyup 事件委托(delegate)给目标文本区域。

$(".parent-div").on('keyup', 'textarea', function(e) { ...

parent-div 可以是表单元素，也可以是最接近的父元素(如果愿意)。

请参阅此处的示例代码 - http://codepen.io/chainat/pen/VmmmKg