绑定，取消绑定然后重新绑定单击功能 [英] Bind, unbind then rebind click function

问题描述

最初有4个大小相同的盒子.
当用户单击任何一个盒子时，它会放大为大盒子，其内容为父级div的高度和宽度，并隐藏其他兄弟姐妹. c0>包含内容，关闭按钮和下一个div的继续按钮.这是代码:

There are 4 boxes initially of equal sizes.
When user clicks on any box it enlarges to the big box with content to the height and width of parent div and hide other siblings.
On enlarge div there are content, close button and continue button to the next div. Here is the code:

$(function(){
    var $currentBox = false;;
    var open = false;
    var origHeight = $('.box').innerHeight() + 'px';
    var origWidth = $('.box').innerWidth() + 'px';

    $(".clsbtn").click(function(){
        $(".box").animate({
            "height": origHeight,
            "width": origWidth
        },800);

        $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            $(".box").on("click");
        });

        $(".box").click(function() {
            if (open) {
                $currentBox = false;
                $(this).animate({
                    "height": origHeight,
                    "width": origWidth
                },800);

                $(".box").show();
                $(".box-container").show();
                $(".box-content").hide();
                open = false;

                $(".box").bind("click");
            } else {
                $currentBox = $(this);
                var width = $('.boxes').innerWidth() + 'px',
                height = $('.boxes').innerHeight() + 'px';
                $(this).animate({
                    "height": height,
                     "width": width
                },800);

                $(this).find(".box-container").hide();
                $(this).find(".box-content").show();

                $(".box").not(this).hide();
                open = true;
                $(".box").unbind("click");
            }
        });
    });
});

问题:

1. 当框放大时，它会禁用对父级div的点击(即框")，并且关闭按钮可以正常工作.但是当单击关闭按钮时，重新绑定功能不起作用.因此，如果div接近其原始大小，则无法单击以使其再次放大.

1. When box enlarges it disable the clicks on parent div (i.e. "box") and the close button working properly. But when on click of close button the rebind function is not working. So if div is close back to its original size then it click is not working to make it enlarge again.

第二，我想使继续"按钮进入下一个放大的打开div.任何帮助将不胜感激.

Secondly i want to make continue button to next enlarged open div. Any help would be appreciated.

谢谢

推荐答案

首先，我将使用.off()和.on()代替.bind()和.unbind().有关更多信息，请查看 jQuery.bind()和jQuery.on()有什么区别?.

First, instead of .bind() and .unbind() I would use .off() and .on(). Check out What's the difference between jQuery.bind() and jQuery.on()? for more information.

此外，无论何时取消绑定或对事件使用off('click')，都不能只使用bind('click')或on('click')并期望使事件恢复正常.对于您的情况，您将不得不在$(".box").click(function(){...}行中重新声明该事件.

Also any time you unbind or use off('click') on an event, you cant just use bind('click') or on('click') and expect to get the event back to normal. You would have to re-declare the event, in your case, the function in the line $(".box").click(function(){...}.

$(function(){
var $currentBox = false;;
var open = false;
var origHeight = $('.box').innerHeight() + 'px';
var origWidth = $('.box').innerWidth() + 'px';

$(".clsbtn").click(function(){
    $(".box").animate({
        "height": origHeight,
        "width": origWidth
    },800);

    $(".box").show();
        $(".box-container").show();
        $(".box-content").hide();
        $(".box").on("click");
    });

    function activate() {//change here
        if (open) {
            $currentBox = false;
            $(this).animate({
                "height": origHeight,
                "width": origWidth
            },800);

            $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            open = false;

            $(".box").on("click",activate());//change here
        } else {
            $currentBox = $(this);
            var width = $('.boxes').innerWidth() + 'px',
            height = $('.boxes').innerHeight() + 'px';
            $(this).animate({
                "height": height,
                 "width": width
            },800);

            $(this).find(".box-container").hide();
            $(this).find(".box-content").show();

            $(".box").not(this).hide();
            open = true;
            $(".box").off("click");//change here
        }
    });

 $(".box").on("click",activate());//change here
});


});

这篇关于绑定，取消绑定然后重新绑定单击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！