Jquery代码不会在ajax调用上修改html标签的属性答案

【问题标题】：Jquery code won't modify attributes of html tag on ajax callJquery代码不会在ajax调用上修改html标签的属性
【发布时间】：2020-02-29 09:09:35
【问题描述】：

谁能告诉我为什么下一个 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>

谢谢

【问题讨论】：

"...is not working" 是如何定义的？ -> How do I ask a good question

标签： javascript jquery html django

【解决方案1】：

使用 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");
    });

});

【讨论】：

为什么 OP 应该使用 .on() 而不是 .click()/.hover()（他们自己只是调用 .on()）？
@Andreas 正如 Jake 所说，此内容来自 ajax。所以点击和悬停事件需要绑定。那个时候 .on() 必须使用。
"...正如 Jake 所说的" - 在他的一个 cmets 中，他在您回答几个小时后添加了另一个答案。请编辑您的答案，使其不仅说 "use X" 而是 "because of X you have to use Y" 对 X 的真实解释i> 和 Y

【解决方案2】：

您的 div(.post) 模板是 SSR 标记的一部分吗？如果它是动态生成的，那么你需要绑定事件发布它的渲染。

我怀疑这可能是一个案例。

【讨论】：

是的，这个模板是服务器端渲染的，我用 Ajax 调用来调用这个模板，但是“那么你需要绑定事件发布它的渲染”是什么意思。
这就是现在的解决方案。由于此模板是通过 Ajax 调用实现的，因此在 Ajax 成功时，您可能会将其注入 Dom。因此，一旦通过 Dom 注入，您就可以在新注入的 DOM 节点上绑定事件。
或第二个解决方案：您可以使用 jquery 事件委托以及使用文档作为根节点。这将有助于将事件绑定到我们通过 Ajax 获得或在 Ajax 之后创建的动态节点。
好吧，我用谷歌搜索了一下，我会用.bind 试试。当我在家时。
@Jake "...with an Ajax call" - 此信息必须成为您问题的一部分。

【解决方案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)
});

【讨论】：