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

Question

I have this code for a textarea count. It works well but once I embed it like I have done below, it doesn't work and no error is thrown. I've been on it for over 3 days now. I'll appreciate some help please.

<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>

The Jquery part

$("#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

From the html element below, I am pretty sure that you're using a third-party library to create a textarea element for taking a user input programmatically.

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

Now, $('#c_obj').on(.. binds an event on a p tag, not the textarea element you want to check the word count. The reason could be either the textarea doesn't exist yet, or it gets created dynamically after user initiates an action.

Solution:

Bind an event on a body or parent element instead and delegate the keyup event to the target textarea.

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

The parent-div can be the form element or the closest parent element if preferred.

See the sample code here - http://codepen.io/chainat/pen/VmmmKg