title: jquery how to add comments to a post
body: <p>Hello I'm currently making a "forum" in which a user can submit a post and will be displayed. I would like the option to add a comment to it. </p>
  
  <p>I am doing everything client side.</p>
  
  <p>Here is the code to generate the forum:</p>
  
  <pre><code>$.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 = '&lt;div&gt;&lt;span class="forum-title"&gt;'+post.title+'&lt;/span&gt;'+buildType(post.type)+'&lt;/div&gt;';
      var author =  "&lt;div class=\"forum-author\"&gt;By: "+post.author+" on "+formatDate(post.date)+"&lt;/div&gt;";
      var body =    "&lt;pre&gt;"+post.body+"&lt;/pre&gt;";
      var comment = "&lt;div class=\"forum-comment\"&gt; &lt;div class=\"btn-group\"&gt;&lt;a class=\"btn btn-mini btn-primary\" role=\"button\" data-toggle=\"modal\" id=\"btn-forum-comment\"&gt;&lt;i class=\"icon-comment icon-white\"&gt;&lt;/i&gt; comment&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;";
      var footer =  "&lt;hr style=\"border-top: 1px dotted #b0b0b0;border-bottom: 0px\"&gt;";
      var entry = titleAndType+author+body+comment+footer;
      return entry;
    }
  </code></pre>
  
  <p>How could I do it so when I click on the comment btn I grab some information of the post? Also in this method calling:</p>
  
  <pre><code>// Button comment
    $("#btn-forum-comment").click(function() {
      alert("clicked");
    });
  </code></pre>
  
  <p>This wont work because there are more than 1 types of "id=btn-forum-comment". Should I use a class? If so how do I grab more instance the title of the post so that when I post to my server I can update the correct entry.</p>
  
  <p>UPDATE: class isn't working from the generated forum. The button click isn't getting triggered. Any ideas?</p>
  
  <pre><code>var comment = '&lt;div class="btn-group"&gt;&lt;a class="btn btn-mini btn-primary btn-forum-comment" id="btn-forum-comment-'+post._id+'"&gt;&lt;i class="icon-comment icon-white"&gt;&lt;/i&gt; comment&lt;/a&gt;&lt;/div&gt;';
  
  // Button comment
    $(".btn-forum-comment").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
      console.log("clicked");
      alert($(this).attr('id')+" clicked"); 
    });
  </code></pre>
  
  <p>I am having issues with the click, I think it has to do something with the dynamic loading. I apply the class to an hardcoded html and it works. But not with the dynamic thanks.</p>
  
  <p>UPDATE2: updating for future users. I needed to use the delegate function</p>
  
  <pre><code>$("#forum").delegate(".btn-forum-comment", "click", function() {
      console.log("clicked");
      alert($(this).attr('id')+" clicked");     
    });
  </code></pre>