CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pokemon
pokemon

Reputation: 71

jQuery not working on dynamically generated same divs

I am trying to make a comment reply section. I am loading the same div for reply which I use for commenting using $('#1').append($('.enterComment').html()); where 1 is the id of the div which will be displayed when reply is clicked.

.enterComment div contains a hidden submitPost button which will be displayed as soon as the user starts typing comment.

That div is loading properly but The problem for me is that when I loaded the same div in reply section and as I start typing anything in that it only displays the hidden div in the main comment div and not in the reply one.

My html is 

<div class="enterComment">
      <form id="insertComment">

          <textarea name="comment" placeholder="comment here..."></textarea>

          <div id="commentOptions">
             <button type="button" class="btn btn-primary btn-sm">Comment</button>
          </div>
        </form>
    </div>

For reply I have 

    <ul class="commentList">
         <li>
             <div class="commentData" id="1">
                <p>The comment content will go here</p>
                <p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
              </div>
          </li>
       </ul>

and script is 

$("body").on('focus', 'textarea', function() {
     $('#commentOptions').fadeIn(1000);
}); 

  $("body").on('click', '#1 p .reply', function() {
       $('#1').append($('.enterComment').html()); 
  });

Upvotes: 1

Views: 142

Answers (2)

J. S.
J. S.

Reputation: 9625

I've created an answer in one HTML file which works without dependencies apart from the jQuery and Bootstrap which you were using on your example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css">
    body{
      padding: 10px;
    }

    .wrapper{
      width: 800px;
      margin-right: auto;
      margin-left: auto;
    }

    .submit-comment-btn-container {
      display: none;
    }
  </style>

  <script type="text/javascript">
    $( document ).ready(function() {
      $('#comment-textarea').on('focus', function() {
        $('.submit-comment-btn-container').fadeIn('fast');
      }); 

      $('#submit-comment-btn').on('click', function() {
        var text = $('#comment-textarea').val();
        if(text != ''){
          $('.submit-comment-btn-container').fadeOut();
          $('#comment-textarea').val('');
          // cloning the first child of the comments to use as a template
          var comment = $('.comment-list').children().first().clone();
          // replacing the content of the cloned comment with the new text
          $(comment).html(text);
          // appending the new comment to the comment list
          $(comment).appendTo('.comment-list');

        }
      });
    });
  </script>
</head>

<body>
  <div class="wrapper">
    <div class="enterComment">
      <form id="insertComment">
        <div class="comment-text-container">
          <textarea id="comment-textarea" placeholder="Comment here..."></textarea>
        </div>
        <div class="submit-comment-btn-container">
          <button id="submit-comment-btn" type="button" class="btn btn-primary btn-sm">Comment</button>
        </div>
      </form>   
    </div>
    <div class="comment-list-container">
      <ul class="comment-list">
        <li>
          <div class="comment">
            Comment goes here
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You need to fade in the following div of textarea so use .next().

Also, Identifiers in HTML must be unique, hence use CSS class. Here in the example I have used commentOptions CSS class.

$("body").on('focus', 'textarea', function() {
  $(this).next('.commentOptions').fadeIn(1000);
});

$("body").on('click', '.commentData p .reply', function() {
  var element = $('.enterComment').clone();
  element.find('.commentOptions').hide();
  $(this).closest('.commentData').append(element);
});
.commentOptions {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enterComment">
  <form id="insertComment">
    <textarea name="comment" placeholder="comment here..."></textarea>
    <div class="commentOptions">
      <button type="button" class="btn btn-primary btn-sm">Comment</button>
    </div>
  </form>
</div>


<ul class="commentList">
  <li>
    <div class="commentData" id="1">
      <p>The comment content will go here</p>
      <p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
    </div>
  </li>
</ul>

Upvotes: 2

Related Questions