0

期待どおりに動作しない次の jQuery コードがあります。私は何か間違ったことをしていると確信していますが、私はそれを見ません。基本的に、ブログが公開されていない場合、画像をクリックすると、DB にアクセスし、それに応じて更新されます。それはすべて問題ありません。

  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>
4

2 に答える 2

3

ID #publish と #not_published を使用しています。.not_published のように複数の #not_published を使用する代わりに、クラスを使用してみてください

送信前にvar IDを確認してください

于 2013-01-07T06:15:21.820 に答える
1

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);
            }   
        });
});
于 2013-01-07T06:24:43.940 に答える