Utilizzando jQuery per rimuovere e aggiungere classi ai pulsanti, la nuova classe aggiunta non funzionerà con la sua funzione click

Question

Ho 2 pulsanti, fare clic su uno scambia le classi per entrambi i pulsanti.
Le classi sono selected e unselected.

mio CodePen:
http://codepen.io/leongaban/pen/iLBvs

Ad esempio: clicca sul pulsante Login rimuoverà è classe selezionata e dargli la sua classe selezionata e dare il pulsante Register sua classe selezionata.

Ora il problema è che la classe register_unselected non funziona. Le classi unselected sono quelle che hanno fare clic su azioni nel mio jQuery.

Dovrei essere in grado di continuare a fare clic sul pulsante grigio e trasformandolo in blu. Tuttavia, dopo aver fatto clic sul primo pulsante grigio (login), il nuovo registro dei pulsanti grigi non funziona.

Utilizzo dell'ispettore di Chrome È evidente che la mia classe register_unselected è stata aggiunta, tuttavia la funzione clic non funziona.

Tutte le idee? Come ti avvicineresti a questo?

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

Quando si chiama $(".register_unselected").click() jQuery cerca in realtà il DOM per eventuali elementi corrispondenti .register_unselected e poi intercetta gli eventi click su di loro. Poiché il tuo elemento non esisterà fino a quando non viene chiamato questo metodo, questo non avrà alcun effetto.

Utilizzare invece $("body").on("click", ".register_unselected", function(){});

È inoltre possibile sostituire body con un altro selettore che conterrà sempre le classi di modifica degli elementi.

EDIT: Ecco un CodePen biforcuta: http://codepen.io/anon/pen/DqFuL

Answer 2

Quando si assegnano i gestori click sulla base di classe, i gestori sono impostati sui pulsanti che corrispondono a quella classe IN QUEL MOMENTO. Non cambieranno solo perché hai cambiato le classi. È necessario implementare un gestore di clic che rileva quali classi sono impostate al momento del clic e agiscono di conseguenza.

Answer 3

Utilizzare .on() per delegare gli eventi di clic da un elemento dom che è statico e contiene entrambi.

Quindi, se non del caricamento della pagina, si ha:

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

Poi invece di utilizzare.fare clic su(), fare questo:

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

e

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

Answer 4

si può anche fare questo

// 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'); 
    } 
}); 

Ascolta il ID e quindi controllare è che è questa classe.

.on è più veloce

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

Answer 5

Nessuno ha dato la soluzione più ovvia ed elegante.

Consente ripulire il CSS un po ':

//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); 
} 

Quindi il codice HTML è ora

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

Il jQuery è:

$("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'); 

}); 

Invece di chiamare la classe .target è possibile chiamalo .unselected. Dal contesto della tua domanda è probabile che tu non abbia bisogno di due classi separate, che le classi siano fatte per essere applicate a molti elementi e se hai bisogno di fare riferimento a loro individualmente hai già gli id s.

Inoltre, è possibile applicare molte classi a un elemento e quindi sovrascrivere gli stili da una classe specificando valori di proprietà diversi nell'ultima classe. Qualunque classe sia applicata per ultima, sovrascriverà le impostazioni di qualsiasi classe già applicata, a meno che i valori per le proprietà che si desidera sovrascrivere non siano stati specificati nella classe di sovrascrittura.