1

Пытаюсь сделать кнопку Like. Использую ajax запрос. Но только самая верхняя кнопка лайка работает, другие не реагируют. Код:

{% extends 'main.html'%}
{% load staticfiles %}
{% block polls %}
<div class="large-8 columns">
{% for poll in polls %}
    <h6>{{ poll.pub_date }}</h6>
    <h4><a href="/{{poll.id}}/"> {{ poll.question }}</a></h4>
    <div align="right">
    <button id="like" data-id="{{ poll.id }}" class="button tiny">
    <b id="like_count"> {{ poll.likes }}</b>
    </button>
    </div>
    <hr>
{% endfor %} 
</div>

ajax запрос:

$(document).ready(function() {
$('#like').click(function(){
    var catid;
    catid = $(this).attr("data-id");
     $.get('http://127.0.0.1:8000/addlike/', {id: catid}, function(data){
               $('#like_count').html(data)
               $('#likes').hide();
           });
});
});

1 ответ 1

1

Вы в цикле {% for poll in polls %} присваиваете всем кнопкам id="like".

Во-первых, это некорректно. По стандарту id в документе должен быть уникален (если id не уникален, то поведение браузера не определено - в любом случае, при запросе элемента по id он выдаст только один элемент, а не множество). Аналогичная ошибка у Вас и с другими id - они тоже будут неуникальны.

Во-вторых, Вы на один элемент вешаете обработчик $('#like').click - вот одна кнопка и работает.

Стоит в данном случае использовать классы (class="js-like", например), и на все элементы (в цикле в Javascript) вешать события.

2
  • а как динамически присвоить id? Commented 6 окт. 2015 в 18:39
  • 1
    1)можно взять id из модели/из контекста (во view дописать каждому объекту poll свойство, например, button_id) 2) можно через переменную {{ forloop.counter }} в цикле: <button id="like{{ forloop.counter }}"> (содержит счетчик количества выполненных итераций, включая текущую, т.е. получите id: like1, like2 и т.д. Но вопрос - зачем? Используйте классы вместо id, и беспокоиться об уникальности не придется.
    – artbataev
    Commented 7 окт. 2015 в 12:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.