jQuery ne fonctionne pas sur les mêmes divs générés dynamiquement

J'essaie de créer une section de commentaire. Je charge la même div pour la réponse que j'utilise pour commenter en utilisant $('#1').append($('.enterComment').html()); où 1 est l'identifiant de la div qui sera affiché lorsque la réponse est cliquée. .enterComment div contient un bouton submitPost caché qui sera affiché dès que l'utilisateur commence à taper un commentaire. Ce problème est pour moi quand j'ai chargé le même div dans la section réponse et que je commence à taper quoi que ce soit dans le div principal et non pas dans le répondeur .jQuery ne fonctionne pas sur les mêmes divs générés dynamiquement

Mon html est

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

Pour réponse, j'ai

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

et script est

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

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

Source

2017-07-18 pokemon

'id' seul le numérique n'est pas une bonne pratique – prasanth

Avez-vous plusieurs éléments avec le même identifiant de '# 1'? –

Non pas du tout c'est le seul – pokemon

J'ai créé une réponse dans un fichier HTML qui fonctionne sans dépendances en dehors de la jQuery et Bootstrap que vous utilisiez votre exemple:

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

Source

2017-07-18 11:36:32

Vous devez effacer dans ce qui suit div de textarea donc utiliser .next().

De plus, les identificateurs HTML doivent être uniques, d'où la classe CSS. Ici, dans l'exemple, j'ai utilisé la classe CSS commentOptions.

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

Source

2017-07-18 10:27:33 Satpal

Avec ceci rien n'apparaît même dans le commentaire div – pokemon

@pokemon, Son apparaissant comme le enfant de '# 1' – Satpal

Apparaît mais quand j'enlève' display: none'. S'il vous plaît aidez-moi à obtenir l'effet FadeIn – pokemon

jQuery ne fonctionne pas sur les mêmes divs générés dynamiquement

Répondre

Questions connexes