jquery - jQuery多值更新问题

Question

我有以下 jQuery 代码，它不能按我的预期工作。我确定我做错了什么，但我没有看到。基本上，如果博客没有发布，当我点击图片时，它会访问我的数据库并相应地更新它。这一切都很好。

1. 我点击 .not_published
2. .not_published 的内容使用显示 ajax-loader.gif 的图像标记进行更改
3. 当服务器返回成功消息时，我将 #not_published 父级的 html 更新为新内容，其中包括将 .not_published 替换为 .published。

当我单击 .not_published 时，我得到的只是 ajax 图像加载，它就在那里。如果我alert("message');在成功函数中添加一个，它工作正常。

列出第 3 点不起作用。我不知道为什么。请看下面的代码：

jQuery代码：

$(document).on('click','.not_published', function(){
       var ID = $(this).siblings("p").text();
        $(this).html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");
        $.ajax({
            url: "/posts/publish/"+ID,
            type: "post",
            data: '',
            success: function(responseText, statusText, xhr, $form){
                $(this).parent().html("<span class=\"published\"><img style=\"width:20px;\" src=\"/img/admin/checkmark_green.png\"></span><p style=\"display: none\">ID</p>");
            },
            error: function(responseText){
                alert(responseText);
            }   
        });
});

HTML 代码

<div id="publish">
    <span id="not_published">
        <img style="width:20px"  src="/img/admin/checkmark_red.png">
    </span>"
    <p style="display: none">1</p>
</div>

Answer 1

您正在使用 ID #publish 和 #not_published。尝试使用类而不是使用多个 #not_published 像 .not_published

并在发送前检查 var ID

Answer 2

将元素存储在 AJAX 请求之外的变量中，但在你这样做之前......在成功处理程序日志this到控制台中。这不是你想的那样。

如评论中所述，还将 ID 更改为类

$(document).on('click','.not_published', function(){
       var ID = $(this).siblings("p").text();
        var $el=$(this).html("<img style=\"padding-left:15px;\" src=\"/img/admin/ajax-loader.gif\">");

        $.ajax({
            url: "/posts/publish/"+ID,
            type: "post",
            data: '',
            success: function(responseText, statusText, xhr, $form){
                 /* change $(this) to $el defined above*/
                $el.parent().html("<span class=\"published\"><img style=\"width:20px;\" src=\"/img/admin/checkmark_green.png\"></span><p style=\"display: none\">ID</p>");
            },
            error: function(responseText){
                alert(responseText);
            }   
        });
});