jQueryを使用してボタンをクラスに追加したりクラスを追加したりすると、新しいクラスが追加されても機能しません。

Question

2つのボタンがあります。
クラスはselectedとunselectedです。

マイCodePen：
http://codepen.io/leongaban/pen/iLBvs

例えば：それは選択されていないクラスの削除とそれにその選択したクラスを提供し、登録ボタンにその選択されていないクラスを与えるログインボタンをクリックしてください。

ここで問題は、register_unselectedクラスが機能しないことです。 unselectedクラスは、をクリックすると、アクションがjQuery内にあります。

灰色のボタンをクリックして青色に変えることができるはずです。しかし、最初のグレーのボタン（ログイン）をクリックした後、新しいグレーのボタンのレジスタは機能しません。

Chromeのインスペクタを使用すると、私のregister_unselectedクラスが追加されていることがわかりますが、クリック機能は機能しません。

任意のアイデア？どのようにこれにアプローチしますか？

// Login Tab (default : first) 
$(".login_unselected").click(function(){ 

    console.log('clicked login'); 

    // Show Login Tab as selected 
    $(this) 
    .removeClass('login_unselected') 
    .addClass('login_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_register') 
    .removeClass('register_selected') 
    .addClass('register_unselected'); 

}); 

// Register Tab 
$(".register_unselected").click(function(){ 

    console.log('clicked register'); 

    // Show Login Tab as selected 
    $(this) 
    .removeClass('register_unselected') 
    .addClass('register_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_login') 
    .removeClass('login_selected') 
    .addClass('login_unselected'); 

}); 

Answer 1

あなたはjQueryのは、実際に.register_unselectedに一致するすべての要素のDOMを検索し、それらのクリックイベントをリッスン$(".register_unselected").click()を呼び出します。このメソッドが呼び出されるまで、要素は存在しないので、これは効果がありません。

代わりに$("body").on("click", ".register_unselected", function(){})を使用してください。

また、bodyを、要素を変更するクラスを常に含む別のセレクタに置き換えることもできます。

EDIT：ここではフォークCodePenです：あなたは、クラスに基づいてクリックハンドラを割り当てるとhttp://codepen.io/anon/pen/DqFuL

Answer 2

、ハンドラがその時点でそのクラスに一致するボタンに設定されています。あなたがクラスを変更しただけで彼らは変わりません。クリック時にどのクラスが設定されているかを検出し、それに応じて動作するクリックハンドラを実装する必要があります。

Answer 3

.on()を使用して、静的で両方を含むDOM要素からのクリックイベントを委譲します。

ページの読み込みであれば、あなたが持っている：そして、

<ul id="container"> 
    <li class="login_selected">Login</li> 
    <li class="register_unselected">Register</li> 
</ul> 

の代わりに使用しました。（）をクリックし、次の操作を行います。

$('#container').on('click', '.login_unselected', function(){ 
    //do stuff 
}); 

と

$('#container').on('click', '.register_unselected', function(){ 
    //do stuff 
}); 

Answer 4

はまたチェックし、この

// Login Tab (default : first) 
$(".login_unselected").click(function(){ 

    console.log('clicked login'); 

    // Show Login Tab as selected 
    $(this) 
    .removeClass('login_unselected') 
    .addClass('login_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_register') 
    .removeClass('register_selected') 
    .addClass('register_unselected'); 

}); 
// Register Tab 

$("#tab_register").click(function(){ 

    console.log('clicked register'); 
    if($(this).hasClass("register_unselected")){ 
    // Show Login Tab as selected 
    $(this) 
    .removeClass('register_unselected') 
    .addClass('register_selected'); 

    // Show Register Tab as unselected 
    $(this).parent().find('#tab_login') 
    .removeClass('login_selected') 
    .addClass('login_unselected'); 
    } 
}); 

はIDを聞いて行うことができ、それは、このクラスのです。

.onは、誰もがより明白とエレガントな解決策を与えていない

[http://www.jsperf.com/change-class-on-click] 

Answer 5

高速です。ですので、HTMLが今のjQuery

<ul> 
    <li id="tab_login" class="target">Login</li> 
    <li id="tab_register" class="target">Register</li> 
</ul> 

ある

//instead of .login_unselected, .registerunselected 
.target { 
     color: #ccc; 
     background: #666; 
     cursor: pointer; 
} 

//instead of .x_selected, .y_selected 
.selected { 
     color: #fff; 
     background: #3399cc; 
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
} 

：

$("ul").on("click", ".target", function(){ 

     // Remove selected class from any that have it 
     $(".target").removeClass('selected'); 
     // Add class to the one you're clicking on 
     $(this).addClass('selected'); 

}); 

代わりの.targetすることができますクラスを呼び出す

は少しCSSをクリーンアップすることができますそれを.unselectedと呼んでください。あなたの質問の文脈からは、2つの別々のクラスは必要ないかもしれません。クラスは多くの要素に適用されるように作られています。個別に参照する必要がある場合は、idが既にあります。

また、あなたが要素に多くのクラスを適用し、最後のクラスに異なるプロパティ値を指定することにより、一つのクラスからのスタイルを上書きすることができ、覚えておいてください。最後に適用されるクラスは、オーバーライドするクラスでオーバーライドするプロパティの値が指定されていない限り、既に適用されているクラスの設定をオーバーライドします。