1

ボタンにライブクリック機能を使用して、Ajax Loaded HTML で動作するようにしたいのですが、jQuery のライブクリックの新しいバージョン -- $(".button").live("click", function() {...})-- が.on()機能を備えたものであることを知りました。

その構文では、要素はパラメーター内にあるため、要素が「this」の場合、その要素を取得できませんでした。それを取り戻す方法はありますか？

$(".selection-item a").each(function(){
    var parent_selection = $(this).parents(".selection-item-wrapper");

    // $(this).click(function(){ //This is the original function which works fine EXCEPT on Ajax Loaded HTML
    $(parent_selection).on("click",this,function(){
        $(".selection-item a",parent_selection).removeClass("active");
        $(this).addClass("active");  //This does not target my desired element which is $(".selection-item a")'s this

        console.log( $(this) ); // The "this" value returns the parent_selection, I want it to return the particular "this" of $(".selection-item a") read from the .each() on top of my code
    });
});

これは私の HTML です。シンプルなアイテムセレクションを作成しています。画像のアンカー タグをクリックするたびに、「アクティブな」クラスを追加して、特定の項目が選択されたことを示す境界線付きの css を追加します。

<div class="selection-item-wrapper">
    <div class="selection-item">
        <a href="javascript:void(0);"><img src="img/image1.png"></a>
        <h3>Item 1</h3>
    </div>
    <div class="selection-item">
        <a href="javascript:void(0);"><img src="img/image2.png"></a>
        <h3>Item 2</h3>
    </div>
    <div class="selection-item">
        <a href="javascript:void(0);"><img src="img/image3.png"></a>
        <h3>Item 3</h3>
    </div>
</div>
4

6 に答える 6

1

HTML マークアップがないと 100% 確信が持てませんが、それぞれに少し混乱しています。

とにかく.on、より具体的な方法で要素をターゲットにするように関数を変更します。

$('.selection-item').on("click","a",function(){
        $(".selection-item a").removeClass("active")
        var myself = $(this);
        myself.addClass('active');
        console.log( $(this) );
});

更新しました

あなたは、ajaxed マークアップで作業するために必要だと言っています。まあ、.on最上位のセレクター$('.selection-item-wrapper')がページの読み込み時にあった場合にのみ機能します。

ajax コンテンツにバインドしようとしている場合は機能しません。.onしたがって、何かを ajax する前にマークアップ全体を提供してくれなければ、私は助けることができません。（できますが、行うのは悪いことです）。だから私にすべてのコードを教えてください。

だからここに作業コードがあります：

$('.selection-item-wrapper').on("click","a",function(){
    $(".selection-item a").removeClass("active")
    var myself = $(this);
    myself.addClass('active');
    console.log( myself );
    return false;
});

これが実際の例のフィドルです。

補足として、javascript:void(0);すでにイベントがバインドされている場合は、URL を指定する必要はありません$('.selection-item').on("click"。そのため、コードに追加したコードに js を維持するのがより困難になるのではなく、return false;. preventDefault()たとえば、リンクのデフォルトの動作を防ぐ方法は他にもあります。しかし、この状況returning falseでは問題ありません。

于 2013-07-10T08:16:15.917 に答える
0

このコードで試してください

$('.selection-item').click(function(){
 $('.selection-item').removeClass('active');
    $(this).addClass('active');
});

このデモをチェック

于 2013-07-12T06:25:23.550 に答える
0

返信ありがとうございます！しかし、今では .each() を必要とせずに機能しました...次のものを使用しました:

$(document).on("click",".selection-item a",function(){
    var parent_selection = $(this).parents(".selection-item-wrapper");
    $(".selection-item a",parent_selection).removeClass("active");
    $(this).addClass("active");
});
于 2013-08-27T02:25:13.553 に答える