jQuery arbeitet nur am ersten Event auf Seite

Question

Die folgende jquery wird nur das '# switch1' html ändern, wenn das erste Mal geklickt wird, also bin ich mir nicht sicher, warum es beim zweiten Mal das Conditional nicht durchläuft Aktion wird genommen.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#switch1 .switch').click(function(){ 
    if($(this).prev().is(':checked')){ 
     $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="0"/>Twitter');} 

    else{ 
     $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="1" checked="checked"/>UTwitter');}});}); 
</script> 

<form id='socialForm' action='' method="post"> 
    <ul id="switch1"> 
    <input class="switch" type="checkbox" name="auth_service_twitter" value="0"/>Twitter 
    </ul> 
</form> 

Answer 1

:) ... außer Kraft setzen Sie alle DOM unter dem Schalter ul mit $('#switch1').html(...

Lösungen:

1. Verwenden Delegierten Veranstaltung.
2. Sie alle DOM nicht löschen ...

LIVE DEMO von Delegierten Ereignisse:

$('#switch1').on('click', '.switch', function() { 
    if (!$(this).is(':checked')) { 
     $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="0"/>Twitter'); 
    } else { 
     $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="1" checked="checked"/>UTwitter'); 
    } 
});​ 

---

Update: Sie Ihre jQuery-Version schrieb 1.4 so ist ... Gebrauch live :(so:

function handler(){ 
    if (!$(this).is(':checked')) { 
     $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="0"/>Twitter'); 
    } else { 
     $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="1" checked="checked"/>UTwitter'); 
    } 

} 

$('#switch1 .switch').live('click', handler); 

Live DEMO

Answer 2

Versuchen für die Bindung statt klicken Live() verwenden. click() - Ereignisse werden den Objekten zugewiesen, die beim Laden der Seite vorhanden sind, und da Sie die Elemente durch html() ersetzen, geht die Zuweisung verloren.

BTW, warum nicht $ ('. Switch'). Attr ('checked', 'checked') (und ändern Sie den Wert auf die gleiche Weise) anstelle der gesamten HTML? Sollte robuster sein.

Answer 3

Sie haben das Original checkbox überschrieben und damit den Event-Handler gelöscht.
Siehe http://jsfiddle.net/xDNKe/1/ für eine funktionierende Implementierung.

Answer 4

Sie haben Delegierte verwenden/auf Funktion:

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $('body').on('click', '#switch1 .switch', function() 
    { 
     if (!$(this).is(':checked')) { 
      $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="0"/>Twitter'); 
     } else { 
      $('#switch1').html('<input class="switch" type="checkbox" name="auth_service_twitter" value="1" checked="checked"/>UTwitter'); 
     } 
    }); 
}); 
</script> 

<form id='socialForm' action='' method="post"> 
    <ul id="switch1"> 
    <input class="switch" type="checkbox" name="auth_service_twitter" value="0"/>Twitter 
    </ul> 
</form>