jQuery的如何添加註釋後

Question

你好，我目前正在一個「論壇」中，用戶可以提交後，將被顯示出來。我想要給它添加評論的選項。

我做的一切客戶端。

這裏是生成論壇代碼：

$.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; 
    } 

我怎麼能做到這一點，所以當我在評論點擊BTN我搶後的一些信息？此外，在這種方法調用：

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

這不會工作，因爲有超過100種「ID = BTN-論壇 - 評論」的。我應該使用班級嗎？如果是的話我怎麼攫取更多實例的文章的標題，這樣，當我張貼到我的服務器我可以更新正確的條目。

UPDATE：類不從產生的論壇工作。按鈕點擊沒有被觸發。有任何想法嗎？

var comment = '<div class="btn-group"><a class="btn btn-mini btn-primary btn-forum-comment" id="btn-forum-comment-'+post._id+'"><i class="icon-comment icon-white"></i> comment</a></div>'; 

// 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"); 
    }); 

我遇到了點擊問題，我認爲它必須對動態加載進行一些操作。我將這個類應用於一個硬編碼的html，它可以工作。但不是動態的感謝。

UPDATE2：爲未來用戶更新。我需要使用委託函數

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

Answer 1

添加類的按鈕：

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

和一類的帖子

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

你的事件處理程序：

$(".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"); 
    }); 

通過這種方法，你就可以訪問點擊按鈕的正確的標題，作者，...。

Answer 2

你應該在BTN的id使用後的ID，你的post對象應該有這樣的場post.id（它將包含在數據庫中的職位的唯一ID）

也使用類來訪問所有的按鈕

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

，並單擊事件：

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

是的，使用一個類。

此外，您應該將每個條目包裝在容器div內。這將有助於您在需要時訪問論壇條目的其他部分。

HTML（濃縮爲簡單起見）：

<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... 
});