Question

这里是html模板。

<div id="block" style="display:none;">
    <button id="close">Close</button>
</div>
<button id="call_func">Run</button>

这是js

    var $block = $('#block'),
        $runBtn = $('#call_func');

    var func = function($el){

        var $makeLogBtn = $el.find('#close');

        $makeLogBtn.on('click', function(){
            console.log('Yo');
            $el.hide();
        });

        $el.show();

    }

    $runBtn.on('click', function(){
        new func($block);
    });

当我第一次点击关闭btn时，我收到一个console.log字符串。再次运行功能并按下“关闭”功能。 btn，我已经有3次控制台消息了。接下来推送给我总共6个控制台字符串而不是3.我明白，第一个功能也继续工作。怎么预防呢？

我唯一需要的是在每次关闭＆＃39;关闭之后解除所有功能。方法调用

https://jsfiddle.net/sxsnbcsr/

Answer 1

在绑定新的事件处理程序之前使用.off()删除所有事件处理程序

$makeLogBtn.off().on('click', function(){
    console.log('Yo');
    $el.hide();
});

<强> JSFiddle

Answer 2

在这种情况下，您可以使用.one（）

    $makeLogBtn.one('click', function () {
        console.log('Yo');
        $el.hide();
    });

演示：fiddle

Answer 3

您可以使用：

    var $block = $('#block'),
        $runBtn = $('#call_func'),
        $makeLogBtn = $el.find('#close');

    var func = function($el){
        $el.show();
    }
    $makeLogBtn.on('click', function(){
       console.log('Yo');
       $block.hide();
    });
    $runBtn.on('click', function(){
        func($block);
    });

如何避免循环Javascript

3 个答案:

Updated Fiddle