Javascript 如何解除绑定元素，然后允许该元素再次绑定

我在使用jQuery解除绑定然后动态绑定元素时遇到了一些问题

我正在尝试创建一种标签系统，用户可以在手机上浏览网站。我希望用户能够选择右箭头，并让

ul.tube

向左移动

margin:-300px

（工作正常）。左箭头将使

ul.tube

向左移动

边距：300px

（这也可以正常工作）

我要问的问题是，当你点击

-900px

的最大

左边距时，代码会解开右箭头。我希望当您到达
-900px
后再次开始单击左箭头时，可以重新绑定右箭头。这将允许用户在完全向左选项卡后，再向右选项卡


下面是HTML代码示例

<div id="how-we_set">
    <i class="fa fa-chevron-left left"></i><br>
    <i class="fa fa-chevron-right right"></i><p></p>
    <ul class="tube">
        <li>Discovery</li>
        <li>Discovery 2</li>
        <li>Discovery 3</li>
        <li>Discovery 4</li>
    </ul>
    <div id="tab1">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab2">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab3">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
    <div id="tab4">
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
        <div><span>This is some text</span>This is some text</div>
    </div>
</div>

在看了示例屏幕截图后，我确信您可以理解，每次单击箭头时，我都会尝试为图像和下面的所有内容添加选项卡

我怎样才能使这项工作达到我的预期？有没有更好的办法？我愿意接受新的想法。
只要换个新的就行了

$('#how-we_set i.right').click(function handler() {

与

另一个处理程序也是这样。
这是非常简短的

阅读jQuery中的事件委派。
使用专用的处理程序函数尝试以下操作：

$('#how-we_set i.right').click(right_click_handler);
$('#how-we_set i.left').click(left_click_handler);

function bind_handlers(element) {
    if (parseInt(element.css('marginLeft')) <= -900) {
        $("#how-we_set i.right").css('color', 'rgba(0,0,0,0.2)');
    } else {
        $("#how-we_set i.right").bind('click', right_click_handler);
    }

    if (parseInt(element.css('marginLeft') >= 0) {
        $("#how-we_set i.left").css('color', 'rgba(0,0,0,0.2)');
    } else {
        $("#how-we_set i.left").bind('click', left_click_handler);
    }
};

function right_click_handler() {
    $("#how-we_set i.right").unbind('click', right_click_handler);
    $("#how-we_set ul.tube li").addClass("active");
    $("#how-we_set i.left").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "-=300px"
    },
    function () {
        bind_handlers($(this));
    });
};

function left_click_handler() {
    $("#how-we_set i.left").unbind('click', left_click_handler);
    $("#how-we_set i.right").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "+=300px"
    },
    function () {
        bind_handlers($(this));
    });
};

$（'how-we\u set i.right'）。单击（right\u click\u handler）；
$（'how-we\u set i.left'）。单击（left\u-click\u处理程序）；
函数绑定处理程序（元素）{
if（parseInt（element.css（'marginLeft'））=0{
$（“#how-we_set i.left”）.css（'color'，'rgba（0,0,0,0.2'）；
}否则{
$（“#how-we_set i.left”）.bind（'click'，left#click_handler）；
}
};
函数右键单击处理程序（）{
$（“#我们如何设置i.right”）.unbind（'click'，right#click#handler）；
$（“#我们如何设置ul.tube li”）.addClass（“活动”）；
$（“#how-we_set i.left”）.css（'color'，'rgba（0,0,0,1.0'）；
$（“#如何设置ul.tube”）。设置动画({
“marginLeft”：“-=300px”
},
函数（）{
绑定_处理程序（$（this））；
});
};
函数左键单击处理程序（）{
$（“#how-we_set i.left”）.unbind（'click'，left#click_handler）；
$（“#how-we_设置i.right”）.css（'color'，'rgba（0,0,0,1.0'）；
$（“#如何设置ul.tube”）。设置动画({
“marginLeft”：“+=300px”
},
函数（）{
绑定_处理程序（$（this））；
});
};

这些更改仅影响处理程序注册。注意，在原始的JSFIDLE中，两个按钮都以启用状态开始，但是顶部（左）按钮应该被禁用。如果你先点击顶部按钮，它会因为初始状态而变得有点滑稽；首先单击底部按钮可以很好地避免这种有趣的行为

您可以考虑一些重构以减少代码中的冗余。我对它进行了如下重构（JSFIDLE）：
var how_we_set=$（“#how-we_set”）；
var ul_tube=我们如何设置查找（“ul.tube”）；
var ul_tube_li=ul_tube.find（“li”）；
var right\u i=我们如何设置.find（“i.right”）；
var left_i=我们如何设置.find（“i.left”）；
函数右键单击处理程序（）{
单击处理程序（$（此），“-=300px”）；
};
函数左键单击处理程序（）{
单击处理程序（$（此），“+=300px”）；
};
函数单击\u处理程序（元素、金额）{
右键解除绑定（“单击”，右键单击）；
左键解除绑定（“单击”，左键单击处理程序）；
ul_tube_li.addClass（“主动”）；
ul_管动画({
“marginLeft”：金额
},
更新按钮（状态）；
};
功能更新按钮状态（）{
var marginLeft=parseInt（ul_tube.css（'marginLeft'））；
右i.css（'color'，'rgba（0,0,0,1.0'）；
左i.css（'color'，'rgba（0,0,0,1.0'）；
如果（+marginLeft=0）{
左i.css（'color'，'rgba（0,0,0,0.2）'）；
}否则{
左键绑定（“单击”，左键单击处理程序）；
}
};
更新按钮状态（）；

这仍然是大约相同的代码行数，但是缓存jQuery查找并重新使用左右按钮之间的所有单击处理逻辑，因此按钮之间的行为是一致的。使用一个单独的函数来更新按钮状态（）

，您可以在UI第一次运行之前调用它，以确保按钮状态不允许由于不正确的初始状态而出现奇怪的行为

---

更新的代码还将在调用

animate

之前解除单击处理程序的绑定，以防止在动画运行时应用多个快速单击。此外，通过将像素计数转换为整数，可以与右侧限制（

-900px

）进行比较，以便进行正确的比较。

您好，弗拉基米尔，谢谢您的回复。这似乎解决了这个问题，但现在又带来了另一个问题。解除绑定按钮的代码不再工作。

$（'how-we\u set ul.tube'）。动画（{'marginLeft'：“-=300px”}，函数（）{if（$（this）.css（'marginLeft'）>=“-900px”）{$（'how-we\u set i.right'）。解除绑定（'click'，handler）；$（'how-we set i.right”）。css（'color'，'rgba（0,0,0.2）；}）我的目标是，一旦有人点击右键，UL滚动到-900px，我希望该按钮被禁用（因为将没有更多的内容可查看）。尝试在另一篇文章中询问您的问题。在前一个问题中询问以下问题的解决方案不是一个好方法。@xetra11-我应该澄清我的评论，我道歉。基本上，我希望按钮停止工作（或解除绑定）一次
#我们如何设置ul.tube
到达
左边距：-900px
。当我使用@vladimir tagay代码时，我检查左边距：-900px的函数停止工作。你好，Michael，谢谢你的回复。这越来越接近我想要的，但请注意，当我在第一次单击代码后单击下一个箭头时，它将从添加无效页边距变为添加正页边距。好像在。如有任何其他建议，将不胜感激。谢谢我现在
$('#how-we_set).on('click', 'i.right', function() {})

$('#how-we_set i.right').click(right_click_handler);
$('#how-we_set i.left').click(left_click_handler);

function bind_handlers(element) {
    if (parseInt(element.css('marginLeft')) <= -900) {
        $("#how-we_set i.right").css('color', 'rgba(0,0,0,0.2)');
    } else {
        $("#how-we_set i.right").bind('click', right_click_handler);
    }

    if (parseInt(element.css('marginLeft') >= 0) {
        $("#how-we_set i.left").css('color', 'rgba(0,0,0,0.2)');
    } else {
        $("#how-we_set i.left").bind('click', left_click_handler);
    }
};

function right_click_handler() {
    $("#how-we_set i.right").unbind('click', right_click_handler);
    $("#how-we_set ul.tube li").addClass("active");
    $("#how-we_set i.left").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "-=300px"
    },
    function () {
        bind_handlers($(this));
    });
};

function left_click_handler() {
    $("#how-we_set i.left").unbind('click', left_click_handler);
    $("#how-we_set i.right").css('color', 'rgba(0,0,0,1.0)');
    $('#how-we_set ul.tube').animate({
        'marginLeft' : "+=300px"
    },
    function () {
        bind_handlers($(this));
    });
};

var how_we_set = $("#how-we_set");
var ul_tube = how_we_set.find("ul.tube");
var ul_tube_li = ul_tube.find("li");
var right_i = how_we_set.find("i.right");
var left_i = how_we_set.find("i.left");

function right_click_handler() {
    click_handler($(this), "-=300px");
};

function left_click_handler() {
    click_handler($(this), "+=300px");
};

function click_handler(element, amount) {
    right_i.unbind('click', right_click_handler);
    left_i.unbind('click', left_click_handler);

    ul_tube_li.addClass("active");
    ul_tube.animate({
        'marginLeft' : amount
    },
    update_buttons_state);
};

function update_buttons_state() {
    var marginLeft = parseInt(ul_tube.css('marginLeft'));

    right_i.css('color', 'rgba(0,0,0,1.0)');
    left_i.css('color', 'rgba(0,0,0,1.0)');

    if (+marginLeft <= -900) {
      right_i.css('color', 'rgba(0,0,0,0.2)');
    } else {
      right_i.bind('click', right_click_handler);
    }

    if (marginLeft >= 0) {
      left_i.css('color', 'rgba(0,0,0,0.2)');
    } else {
      left_i.bind('click', left_click_handler);
    }
};

update_buttons_state();