0

Twitter のような単純なプロジェクトを構築していますが、非常に単純です :) ユーザーのホームページ (タイムライン) には多くのツイートがあります。そのため、すべてのツイートにお気に入りボタンがあります。ユーザーがお気に入りボタンをクリックすると、AJAX リクエストがサーバーに送信され、お気に入りのツイートが保存されます。お気に入りのボタンは次のようなものです。

<a href="#" id="1"><i class="icon-star-empty"></i></a>
<a href="#" id="2"><i class="icon-star"></i></a>
<a href="#" id="3"><i class="icon-star-empty"></i></a>
...
...

次の JavaScript を使用して AJAX リクエストを送信します。

$("i").on("click", function() {

    if ( $(this).hasClass("icon-star-empty") ){
        ajaxURL = "/setFavorite"
    } else{
        ajaxURL = "/removeFavorite"
    }

    var linkID = $(this).parent().prop("id");
    var obj    = $(this);

    $.ajax({
        url: ajaxURL,
        type: "POST",
        data: {quoteID : linkID},
        success: function() {
            obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
        }
    });
})

ツイートが多いので、Infinite Scroll Pluginをセットしました。Infinite Scroll を設定しなかった場合、AJAX リクエストはうまく機能します。しかし、私が設定したとき、それらの AJAX リクエストは、無限スクロールを介して読み込まれたツイートに対しては機能しません。つまり、無限スクロール経由で読み込まれたツイートのお気に入りボタンをクリックすると、AJAX リクエストがサーバーに送信されません。ただし、AJAX リクエストは、無限スクロールではなく、デフォルトの HTML を介して読み込まれるツイートで機能します。

だから私の質問は、どうすればこの問題を解決できますか? 無限スクロールで読み込まれたツイートに対して AJAX リクエストを送信するにはどうすればよいですか?

前もって感謝します。

4

1 に答える 1

1

$('selector').on('event', callback)セレクターが処理される時点で存在する要素のイベントのみをバインドします。ただし、無限スクロール コードは後で新しい要素をロードするため、イベントはバインドされません。

解決策はデリゲートを使用しています：

$('selector').on('click', 'i', function() {
    // do stuff
});

selector(動的に追加された) すべての要素を含む親要素である必要がありますi。

于 2012-08-28T02:16:57.100 に答える