Question

我按照脚本显示＆amp;在后续点击中隐藏细分，但不知何故，它在第二次点击时不会隐藏细分。这是代码：

<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版本 - ＆lt; 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版本 - ＆gt; = 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");
            }   
        });

希望这可以帮助你：）

Answer 2

使用时

$('.floatbutton').live('click',function() {

它仅适用于动态添加不的div

您应该使用类似的东西来处理动态添加的对象：

$(document).ready(function () {
    $(document).on("click",".floatbutton",function(){

http://jsfiddle.net/aras7/mVHa7/6/

第二次点击隐藏子div

2 个答案: