Question

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

Answer 1

：）...您使用ul

覆盖交换机$('#switch1').html(...下的所有DOM

解决方案：

使用委托活动。
不要删除所有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

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

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

Answer 3

你覆盖了原来的checkbox因此摧毁了它的事件处理程序。
有关可行的实施，请参阅http://jsfiddle.net/xDNKe/1/。

Answer 4

你必须使用delegate / on function：

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

jQuery只在页面上的第一个事件上工作

4 个答案: