jquery .click() событие выпуск (django)

Question

Я создал представление, которое создает сообщения, и каждый пост имеет comment_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; 
    }); 

Проблема заключается в том, что страница содержит несколько сообщений и каждую кнопку комментарий представления имеет тот же идентификатор «комментарий-пост-кнопка». Таким образом, вышеуказанная функция работает только для верхней позиции, а не для остальных. Я вижу, в чем проблема, но не знаю, как это решить. Пожалуйста помоги.

Вот 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

Удалить идентификатор и добавить класс:

<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 для идентификации элемента DOM, который вызвал событие
• Используйте traversion, чтобы получить правильный DOM элемент из размещать

результат должен выглядеть примерно так (непроверенный):

разметки (я в основном просто избавились от идентификаторов, не знаю, как/если Джанго обрабатывает это автоматически):

{% 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 уникальный идентификатор, как это было предложено кем-то, изменить разметку следующим образом:

{% 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..