[英]jquery how to add comments to a post
您好我正在創建一個“論壇”,用戶可以在其中提交帖子並顯示。 我想選擇添加評論。
我正在做客戶端的一切。
以下是生成論壇的代碼:
$.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");
});
這不會起作用,因為有超過1種類型的“id = btn-forum-comment”。 我應該上課嗎? 如果是這樣,我如何獲取帖子標題的更多實例,以便當我發布到我的服務器時,我可以更新正確的條目。
更新:類不在生成的論壇中工作。 按鈕單擊不會被觸發。 有任何想法嗎?
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");
});
你應該在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");
});
在按鈕中添加一個類:
<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");
});
通過這種方法,您將能夠訪問所單擊按鈕的正確標題,作者.......
是的,使用一個班級。
另外,您應該將每個條目包裝在容器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...
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.