jquery - jQuery 帮助循环回调 jQuery

Question

帮助循环回调jQuery

我的小提琴

错误循环按钮 2

第 1 步：点击 Button1 => 回调 Button2

第 2 步：单击 Button2 => 回调 Button2 + 回调 Button2

第三步：点击Button3 => 回调Button2 + 回调Button2 + 回调Button2

......

步骤n：点击Button* n * => 回调Button2 * n

---

帮助修复：

点击Button1 n => 回调Button2 * 1

谢谢！

Answer 1

您正在事件中绑定事件。如果您考虑一下，如果这样做，您所描述的内容是不可避免的……每次单击按钮都会将另一个单击事件绑定到按钮 2，依此类推……

我已经重构了您的代码以实现您想要的，同时足够灵活，可以在需要时进行扩展。

JSBin 分叉

$(function() {
    var body = $('body'),
        button2 = body.find('#b2');

    var events = {
        b1 : function(event) {
            // Unbind this click event to avoid event stacking
            body.off('click', '#b1', events.b1);

            // Fade in the second button and bind its event
            button2.fadeIn('fast', function() {
                body.on('click', '#b2', events.b2);
            });
        },
        b2 : function(event) {
            // Unbind button2 event whilst managing its click logic
            alert('Button 2 clicked');
            body.off('click', '#b2', events.b2);

            // Hide button 2 and rebind the event to button 1
            button2.fadeOut('fast', function() {
                body.on('click', '#b1', events.b1);
            );
        }
    };

    // Bind the click event to button1
    body.on('click', '#b1', events.b1);
});