2

jqueryでクリックするたびに要素のIDを変更するにはどうすればよいですか? 最初のクリックで正常に動作するこのコードがありますが、もう一度クリックすると、古い ID が呼び出されます。

$("#like<? echo $msgID;?>").click(function(){                                             
        $.post("like.php?status_id=<? echo $msgID;?>", $(this).serialize());
        setTimeout(function() {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        $("#like<? echo $msgID;?>").attr("id","unlike<? echo $msgID;?>").text("Unlike");
        },500);
        });
$("#unlike<? echo $msgID;?>").click(function(){                                     
        $.post("unlike.php?status_id=<? echo $msgID;?>", $(this).serialize());
        setTimeout(function() {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        $("#unlike<? echo $msgID;?>").attr("id","like<? echo $msgID;?>").text("Like");
        },500);
        });
4

3 に答える 3

1

問題は、ID が変更されていないことではなく、クリック ハンドラーが既にバインドされていることです。一般的な意味で、これを行うと：

$("#someId").click(...

その時点でその ID を持つ要素にクリック ハンドラーをバインドし、後で ID を変更しても、クリック ハンドラーは引き続きその要素にバインドされます。

あなたの場合、クリック ハンドラーを 2 つの要素にバインドしようとすることから始めます。1 つは id starting#likeで、もう 1 つは id starting#unlikeですが、最初はそのような要素が 1 つしか存在しないため、1 つのハンドラーのみがバインドされます。

親要素 (またはドキュメント) にバインドされたデリゲートされたイベント ハンドラーを使用するように変更し、クリックされたアイテムがセレクターと一致するかどうかをクリック時にテストするか、2 つのクリック ハンドラーを 1 つのハンドラーに結合して、現在の状態をテストする必要があります。要素:

$("#like<? echo $msgID;?>").click(function () {
    var isLike = $(this).text() === "Like",
        url = isLike ? "like.php" : "unlike.php";
    $.post(url + "?status_id=<? echo $msgID;?>", $(this).serialize());
    setTimeout(function () {
        $("#likeDiv<? echo $msgID;?>").load('like-count.php?status_id=<? echo $msgID;?>');
        $("#like<? echo $msgID;?>").text(isLike ? "Unlike" : "Like");
    }, 500);
});

あなたはあなたのhtmlを表示しませんでしたが、私は#like...要素が要素の中にないと仮定してい#likeDiv...ます(もしそうなら、それはあなたによってリロードされ、.load()それはクリックハンドラを削除します)。

代わりに 2 つの委任されたハンドラーを実行する方法を示すコードを追加できますが、私の考え方では、既に示したようにハンドラーを組み合わせる方が理にかなっています。変更する必要があります。

(また、余談ですが、なぜそれを使用しているsetTimeout()のですか? の 3 番目の引数としてコールバック関数に入れるのは意味がありません$.post()か?)

于 2013-08-10T03:11:04.163 に答える