Код Jquery не изменит атрибуты тега html при вызове ajax

Question

Может кто-нибудь подсказать, пожалуйста, почему следующий jquery код не работает. Я уже пробовал это вне блока $(document).ready, и это также не работает

примечание: странные "{{}}" и "{%%}", как правило, django

Jquery

$(document).ready(function () {

    $(".post_thumb_up").hover(function () {
        $(".post_thumb_up").attr("src", "/post_it/static/media/thumb_up_hover.png");
    });

    $(".post_thumb_up").click(function () {
        $(".post_thumb_up").attr("src", "/post_it/static/media/thumb_up.png");
    });

});

html:

    <div class="post">
        <h3>{{ post.title }}</h3>
        <img class="post_image" src="{% static post.image_path %}">
        <p><i>Door: {{ post.author }}<br>Datum: {{ post.date_posted|date:"l d F, Y, H:i" }}</i></p>
        <div class="post_line"></div>
        <div class="post_actions">
            <input id="test" type="image" class="post_thumb_up" src="{% static "media/thumb_up.png" %}">
            <input type="image" class="post_thumb_down" src="{% static "media/thumb_down.png" %}">
        </div>
    </div>

Спасибо

Answer 1

Является ли ваш шаблон div (.post) частью разметки SSR? Если он генерируется динамически, вам нужно связать событие после его рендера.

Я подозреваю, что это может быть случай.

Answer 2

use jQuery .on () событие, которое является Присоединением функции обработчика события для одного или нескольких событий к выбранным элементам.

 $(document).ready(function () {

    $(document).on(".post_thumb_up", 'hover', function () {
        $(this).attr("src", "/post_it/static/media/thumb_up_hover.png");
    });

    $(document).on(".post_thumb_up", 'click', function () {
        $(this).attr("src", "/post_it/static/media/thumb_up.png");
    });

});

Answer 3

попробуйте использовать setTimeout

$(document).ready(function () {
setTimeout(function(){
    $(".post_thumb_up").hover(function () {
       // may be you need to set "http://" or "fullpath" to src value
        $(this).attr("src", "/post_it/static/media/thumb_up_hover.png");
    });

    $(".post_thumb_up").click(function () {
        $(this).attr("src", "/post_it/static/media/thumb_up.png");
    });
  },200)
});