jQuery multiple values update issue
<p>I have the following jQuery code which does not work as I expect it. I am sure I am doing something wrong, but I dont see it. Basically if a blog is not publish, when I click on the image, it accesses my DB and updates it accordingly. All of that is fine.</p>

<ol>
<li>I click on .not_published</li>
<li>The content of .not_published is changed with an image tag that display ajax-loader.gif</li>
<li>When the server returns a success message, I update the html of #not_published parent with a new content which includes replacing .not_published with .published.</li>
</ol>

<p><img src="http://i.stack.imgur.com/un2QU.jpg" alt="Blog Post List"></p>

<p>All I get when I click on the .not_published is the ajax image loading and it stays there. If I add an <code>alert("message');</code> inside the success function it works fine.</p>

<p><img src="http://i.stack.imgur.com/Y5KsP.jpg" alt="Loading Image"></p>

<p>List point 3 does not work. I cant figure out why. Please see code below:</p>

<p>jQuery Code:</p>

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

<p>HTML Code</p>

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