jquery comment ajouter des commentaires à un article

Question

Bonjour, Je suis en train de créer un "forum" dans lequel un utilisateur peut soumettre un message et sera affiché. Je voudrais l'option d'ajouter un commentaire.

Je fais tout ce qui est côté client.

Voici le code pour générer le forum:

$.get(url, page, function(data){ 
     $("#forum").html(""); 
     for(var i in data) 
     { 
     $("#forum").append(buildForumEntry(data[i])); 
     } 
    }); 

// Builds the forum entry 
    function buildForumEntry(post) 
    { 
    var titleAndType = '<div><span class="forum-title">'+post.title+'</span>'+buildType(post.type)+'</div>'; 
    var author = "<div class=\"forum-author\">By: "+post.author+" on "+formatDate(post.date)+"</div>"; 
    var body = "<pre>"+post.body+"</pre>"; 
    var comment = "<div class=\"forum-comment\"> <div class=\"btn-group\"><a class=\"btn btn-mini btn-primary\" role=\"button\" data-toggle=\"modal\" id=\"btn-forum-comment\"><i class=\"icon-comment icon-white\"></i> comment</a></div></div>"; 
    var footer = "<hr style=\"border-top: 1px dotted #b0b0b0;border-bottom: 0px\">"; 
    var entry = titleAndType+author+body+comment+footer; 
    return entry; 
    } 

Comment pourrais-je faire quand je clique sur le commentaire BTN Je prends des informations du poste? Toujours dans cet appel de méthode:

// Button comment 
    $("#btn-forum-comment").click(function() { 
    alert("clicked"); 
    }); 

Ce ne fonctionnera pas parce qu'il ya plus de 1 types de "id = BTN-forum-commentaire". Dois-je utiliser un cours? Si oui, comment puis-je saisir plus d'instance le titre de la publication de sorte que lorsque je poste sur mon serveur, je peux mettre à jour l'entrée correcte.

MISE À JOUR: la classe ne fonctionne pas à partir du forum généré. Le clic sur le bouton ne se déclenche pas. Des idées? Je rencontre des problèmes avec le clic, je pense qu'il doit faire quelque chose avec le chargement dynamique. J'applique la classe à un HTML codé en dur et cela fonctionne. Mais pas avec les remerciements dynamiques.

UPDATE2: mise à jour pour les futurs utilisateurs. Je avais besoin d'utiliser la fonction de délégué

$("#forum").delegate(".btn-forum-comment", "click", function() { 
    console.log("clicked"); 
    alert($(this).attr('id')+" clicked");  
    }); 

Answer 1

Ajouter une classe à votre bouton:

<a class=\"btn btn-mini btn-primary btn-forum-comment\" ... id=\"btn-forum-comment-"+post.id+"\"> 

et une classe au poste

var entry = "<div class='post'>"+ titleAndType+author+body+comment+footer + "</div>"; 

Votre gestionnaire d'événements:

$(".btn-forum-comment").click(function() { 
    var post = $(this).parents(".post"); //the post of this clicked button 
    //from there you can access title, author,... of this post. 
    var title = post.find(".forum-title"); 
    }); 

Avec cette approche, vous serez en mesure pour accéder au titre correct, auteur, .. du bouton cliqué.

Answer 2

vous devez utiliser l'ID du poste dans l'id BTN, et votre objet post devriez avoir un tel champ post.id (il contiendra l'identifiant unique du poste dans la base de données)

utilisent également la classe pour accéder à tous les boutons

<a class=\"btn btn-mini btn-primary btn-forum-comment-class\" ... id=\"btn-forum-comment-"+post.id+"\">

et l'événement click:

// Button comment 
    $(".btn-forum-comment-class").click(function() { 
    // now you know the id of clicked comment, so you can rewrite this with code which will open a form to answer exactly this comment 
    alert($(this).attr('id')+" clicked"); 
    }); 

Answer 3

Oui, utilisez une classe.

également, vous devez envelopper chaque entrée dans un conteneur div. Cela vous aidera à accéder à d'autres parties de l'entrée du forum si nécessaire.

html (condensé par souci de concision):

<div class="forum-entry" data-id="1234"> 
    <div><span class="forum-title">blah blah</span>...</div> 
    <pre>post body...</pre> 
    <div class="forum-comment"> 
    <div class="btn-group"> 
     <a class="btn btn-mini btn-primary btn-forum-comment">comment</a> 
    </div> 
    </div> 
    <hr /> 
</div> 

javascript:

$('.btn-forum-comment').click(function(ev) { 
    ev.preventDefault(); 
    var $forumEntry = $(this).closest('.forum-entry'); // this will get you a handle to the forum entry. from there, you can access other parts of the entry 
    var forumEntryId = $forumEntry.data('id'); 

    alert('add a comment to forum entry ID ' + forumEntryId); 
    // etc... 
});