Javascript jQuery仅处理第页上的第一个事件

下面的jquery只会在第一次单击复选框时更改“#switch1”html，因此我不确定为什么在第二次执行操作时它不会通过条件语句

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

$（文档）.ready（函数（）{
$（'#switch1.switch'）。单击（函数（）{
如果（$（this）.prev（）是（':checked'））{
$（'#switch1'）.html（'Twitter'）；}
否则{
$（'#switch1'）.html（'UTwitter'）；}}）；

啁啾

：）。。。使用

$（'#switch1'）.html（…

解决方案：

使用委托事件

不要删除所有DOM

委托事件的类型：

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

​

尝试使用live（）进行绑定，而不是单击。当页面加载时，单击（）事件将分配给当前的对象，并且由于您使用html（）替换元素，分配将丢失

---

顺便说一句，为什么不使用$（'.switch'）.attr（'checked'，'checked'）（并以相同的方式更改值）而不是替换所有HTML？应该更健壮。

您正在覆盖原始的

复选框，从而破坏它的事件处理程序。


有关工作实现，请参阅。
您必须使用委托/开启功能：

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


$（文档）.ready（函数（）
{
$（'body'）。在（'click'，'#switch1.switch'，function（）上
{
如果（！$（this）.is（':checked'））{
$（'#switch1'）.html（'Twitter'）；
}否则{
$（'#switch1'）.html（'UTwitter'）；
}
});
});

啁啾

live

函数已被弃用（它不是自jQuery 1.4.4以来的那个家伙。因此，受够了

live

dude.：）您当然是对的，他应该改用on（）。但这并没有改变这样一个事实，即他需要从click（）移动到不影响加载时存在的对象的位置。是的。到上的

。）请参阅我的答案。on似乎与jquery 1.7.1一起工作，而不是与jquery 1.4一起工作（我正在使用，我希望不会改变这一点，因为我在表单中使用的lightswitch插件需要1.4…），我根据您的要求添加了一个
live
版本。。。
<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>