jQuery多值更新问题

Question

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

1. 我点击.not_published
2. 使用显示ajax-loader.gif的图片标记更改.not_published的内容
3. 当服务器返回成功消息时，我使用新内容更新#not_published父级的html，其中包括用.published替换.not_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);
            }   
        });
});