Question

我創建了一個視圖來生成帖子，每個帖子都有一個comments_set，它會生成用戶所做的所有評論。當發佈新評論時，執行下面的功能。

$("#comment-post-button").click(function(){ 
    var event_id = document.getElementById('event-id').value; 
    var url= '/post-comments/'+event_id +'/'; 

    var data = {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, 
       content:document.getElementsByName('comment-post-content')[0].value 
      } 
    $.post(url , data, function(){ 
     $("#refresh-comments").load("/comments/" + event_id + '/', function(){ 
     $("#comment-post-content").val(""); 
     }); 
    }); 
    $("#comment-post-content").val(""); 
    return false; 
    }); 

問題是，頁面包含多個帖子，每個評論提交按鈕都有相同的id「comment-post-button」。所以上面的函數只適用於頂部帖子，而不適用於其他帖子。我可以看到問題是什麼，但不知道如何解決這個問題。請幫忙。

下面是HTML標記：

{% for event in events %} 
    <div class="post"> 
     <div class="post-right"> 
     <div class="post-author"><a href="/{{ event.author.username }}/">{{ event.author.first_name }}</a></div> 
     <div class="post-content">{{ event.description }}</div> 
     <div class="post-bar"> 
      <div class="post-likes">{{ event.up_votes }}<a href="#"><img src="/site-media/static/images/like.png" /></a></div> 
      <div class="post-dislikes">{{ event.down_votes }}<a href="#"><img src="/site-media/static/images/dislike.png" /></a></div> 
      <div class="post-timestamp">{{ event.pub_date }}</div> 
      <a href="#" class="post-comment-link">Comment</a> 
     </div> 
     <div class="post-comment"> 
      <form method="post" action="/post-comments/{{ event.id }}/"> 
      {% csrf_token %} 
      <input type="text" id="comment-post-content" name="comment-post-content" maxlength="200" placeholder="Add a comment..." /> 
      <input type="hidden" id="event-id" value="{{ event.id }}"> 
      <input type="submit" id="comment-post-button" class="comment-post-button" value="Post comment" /> 
      </form> 
     </div> 
     <div id="refresh-comments" class="comments"> 
      {% include "comments.html" %} 
     </div> 
     </div> 
     <div class="post-left"> 
     <a href="#"><img src="../FestJanta/site-media/static/images/post.jpg" /></a> 
     </div> 
    </div> 
    {% endfor %} 

comments.html：

{% for comment in event.comment_set.all|slice:"3" %} 
<div class="comments-right"> 
    <a href="/{{ name }}/" class="first_name">{{ comment.author.first_name }}</a> 
    {{ comment.content }}<br> 
    <div class="comment-timestamp">{{ comment.pub_date }}</div> 
</div> 
<div class="comments-left"><a href="#"><img src="../FestJanta/site-media/static/images/comment.jpg" /></a></div> 
{% endfor %} 

最終有效的解決方案：

$(".comment-post-button").click(function(){ 
    var btn = $(this); 
    var currentPost = btn.parents('.post'); 
    var event_id = currentPost.find('.event-id').val(); 
    var url= '/post-comments/'+event_id +'/'; 
    var data = {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, 
       content:currentPost.find('input[name="comment-post-content"]').val() 
      } 
    $.post(url , data, function(){ 
     $(currentPost.find('.refresh-comments')).load("/comments/" + event_id + '/', function(){ 
     $(currentPost.find('.comment-post-content')).val(""); 
     }); 
    }); 
    return false; 
    }); 

Answer 1

刪除ID，並添加類：

<input type="hidden" class="event-id" value="{{ event.id }}"> 

做這樣的事情：

$('.comment-post-button').click(function(){ 
    var $btn = $(this); 
    var $currentPost = $btn.parents('.post'); 
    var event_id = $currentPost.find('.event-id').val(); 
    //... 
}); 

查找$currentPost範圍內的每個元素： 取而代之的是：

content: document.getElementsByName('comment-post-content')[0].value 

做到這一點：

content: $currentPost.find('input[name="comment-post-content"]').val() 

Answer 2

你可以做到以下幾點：

• 確定所有帖子按鈕，例如通過類似的.comment按鈕一類
• 使用.on()符號的jQuery
的
• 傳遞事件，並使用其target屬性來識別觸發事件
• 使用traversion的DOM元素得到的正確的DOM元素髮布

結果應該是這樣的（未經測試）：

標記（我基本上只是擺脫了ID的;不知道如何/如果Django的自動處理此）：

{% for event in events %} 
<div class="post"> 
    <div class="post-right"> 
    <div class="post-author"><a href="/{{ event.author.username }}/">{{ event.author.first_name }}</a></div> 
    <div class="post-content">{{ event.description }}</div> 
    <div class="post-bar"> 
     <div class="post-likes">{{ event.up_votes }}<a href="#"><img src="/site-media/static/images/like.png" /></a></div> 
     <div class="post-dislikes">{{ event.down_votes }}<a href="#"><img src="/site-media/static/images/dislike.png" /></a></div> 
     <div class="post-timestamp">{{ event.pub_date }}</div> 
     <a href="#" class="post-comment-link">Comment</a> 
    </div> 
    <div class="post-comment"> 
     <form method="post" action="/post-comments/{{ event.id }}/"> 
     {% csrf_token %} 
     <input type="text" name="comment-post-content" maxlength="200" placeholder="Add a comment..." /> 
     <input type="hidden" name="event-id" value="{{ event.id }}"> 
     <input type="submit" class="comment-post-button" value="Post comment" /> 
     </form> 
    </div> 
    <div class="comments"> 
     {% include "comments.html" %} 
    </div> 
    </div> 
    <div class="post-left"> 
    <a href="#"><img src="../FestJanta/site-media/static/images/post.jpg" /></a> 
    </div> 
</div> 
{% endfor %} 

的Javascript：

$("body") // Could be any ancestor, body is not the best option 
.on('click', '.comment-post-button' function(ev){ 
    var clickTarget = ev.target, // The element clicked on 
    postElement = $(clickTarget).closest('.post'), // the div enclosing a post 
    commentSection = $(postElement).find(".comments"), // the div enclosing the comments 
    commentInputField = $(clickTarget).siblings("[name='comment-post-content']"), 
    event_id = $(clickTarget).siblings("[name='event-id']").val(), 
    url= '/post-comments/'+event_id +'/'; 

    // Not sure what this token is, so I will not change that part 
    var data = {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value, 
      content: commentInputField.val() 
     } 
    $.post(url , data, function(){ 
     $(commentSection).load("/comments/" + event_id + '/', function(){ 
      $(commentInputField).val("").prop('disabled', false); // In the callback, empty and reenable 
     }); 
    }); 
    $(commentInputField).prop('disabled', true); // I guess disabling the field makes sense 
    return false; 
}); 

另外一個好處是，你最終將只有一個點擊處理程序。請注意，該解決方案可以進行優化（例如，通過改進選擇器）。另外，jslint會給出一些警告。

Answer 3

給每個崗位& post_Comment_button一個唯一的ID，通過別人的建議，改變標記如下：

{% for event in events %} 
    <div class="post" id="post_{{forloop.counter}}"> 

    [...] 

    <input type="submit" id="comment-post-button_{{forloop.counter}}" class="comment-post-button" value="Post comment" /> 

然後改變js函數如下：

$("#comment-post-button").click(function(event){ 
    var buttonNr = event.target.id.replace('comment-post-button_', ''); 
    var postId = 'post_' + buttonNr; 

    $("#" + postId)... --> and do whatever with it..