jQueryはページの最初のイベントでのみ動作します

Question

次のjqueryはチェックボックスが初めてクリックされたときにのみ '＃switch1' htmlを変更するので、なぜ2度目の条件を通過しないのかわかりません行動がとられる。

<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

：

1. 使用デリゲートイベント：）...あなたは$('#switch1').html(...

   ソリューションとスイッチulの下にあるすべてのDOMをオーバーライドします。

2. デリゲートイベントのすべてのDOM ...

LIVE DEMOを削除しないでください：

$('#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'); 
    } 
});​ 

---

更新：あなたのjQueryのバージョンを書いたが1.4そう...使用であり、 live :(この方法：

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

（住んで使用してみてください）クリックするのではなく、結合のため。 click（）イベントは、ページが読み込まれるときに存在するオブジェクトに割り当てられ、要素をhtml（）に置き換えるので、割り当ては失われます。

なぜ、すべてのHTMLを置き換えるのではなく、$（ '。switch'）。attr（ 'checked'、 'checked'）（値を同じ方法で変更します）より堅牢でなければならない。

Answer 3

元のcheckboxを上書きして、イベントハンドラを破棄していました。
実用的な実装については、http://jsfiddle.net/xDNKe/1/を参照してください。あなたは機能上/デリゲートを使用する必要が

Answer 4

：

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