javascript - 第二次点击隐藏子div

Question

我已经按照脚本在后续点击时显示和隐藏分割，但不知何故它不会在第二次点击时隐藏分割。这是代码:

<script>
$.ajax({
   $('#floatcategory').append("<div class='floatbutton'
   id='float_"+categories[k][0]+"'>" +categories[k][1]+"</div>");
   $('#floatcategory').append("<div id='"+categories[k][0]+"_"+products[l][0]+"'>"
   +products[l][1]+"</div>");
});
 $('.floatbutton').live('click',function() {
    var floatidl=$(this).attr('id');
    var floatid=floatidl.substr(6);
    if ($('#'+floatidl'').hasClass("clicked-once")){
        $('[id^="'+floatid+'_"]').hide();
        $('#'+floatidl'').removeClass("clicked-once");
    }
    else {
        $('[id^="'+floatid+'_"]').show();
        $('#'+floatidl'').addClass("clicked-once");
    }
});
</script>

我使用的是 jQuery 1.6 版。它不会隐藏 div。谁能帮忙？

Answer 1

使用.live() (对于旧的 jquery 版本 - < v1.7):

$('.floatbutton').live('click',function() {
    var floatidl=$(this).attr('id');
    var floatid=floatidl.substr(6);
    if ($('#'+floatid).hasClass("clicked-once")){
        $('[id^='+floatid+']').hide();
        $('#'+floatid).removeClass("clicked-once");
    }
    else {
        $('[id^='+floatid+']').show();
        $('#'+floatid).addClass("clicked-once");
    }   
});

或

$(document).delegate('.floatbutton','click',function() {
        var floatidl=$(this).attr('id');
        var floatid=floatidl.substr(6);
        if ($('#'+floatid).hasClass("clicked-once")){
            $('[id^='+floatid+']').hide();
            $('#'+floatid).removeClass("clicked-once");
        }
        else {
            $('[id^='+floatid+']').show();
            $('#'+floatid).addClass("clicked-once");
        }   
    });

使用.on() (对于新的 jquery 版本 ->= 1.7):

$(document).on('click','.floatbutton',function() {
            var floatidl=$(this).attr('id');
            var floatid=floatidl.substr(6);
            if ($('#'+floatid).hasClass("clicked-once")){
                $('[id^='+floatid+']').hide();
                $('#'+floatid).removeClass("clicked-once");
            }
            else {
                $('[id^='+floatid+']').show();
                $('#'+floatid).addClass("clicked-once");
            }   
        });

希望这对你有帮助:)