从javascript中的click事件处理程序调用外部函数

Question

我一直在努力解决一个javascript问题，可以简化如下：

真正的问题是Ajax回调和自动列表更复杂。根据我的实际需求，我需要从click事件处理程序调用外部函数。我只想避免递归调用处理程序。

JS：

test();

function test() {
    $('#btnTest').on('click', function () {
        console.log('button clicked');
        test();
    });
}

HTML：

<button id="btnTest" class="btn btn-danger">Test</button>

这里的问题是，当我第一次点击测试按钮时，消息将显示一次。我第二次点击按钮，它会显示两次。第三次我按下按钮，它会显示四次！然后8,16等我认为它是一个基本的编程逻辑，但我仍然不知道如何解决它。我需要从OnClick监听器调用外部函数。任何建议都将受到高度赞赏。

Answer 1

最终您可以使用one功能。

test();

function test() {
    $('#btnTest').one('click', function () {
        console.log('button clicked');
        test();
    });
}

请在此处查看：fiddle

Answer 2

不要让test挂钩事件，因为每次执行test时，你都会反复挂钩它。

Insetad：

$('#btnTest').on('click', test);

function test() {
    console.log('button clicked');
}

Answer 3

那是因为你在自己内部调用了test(); 。它正在执行递归。

这应该有效。无需在函数名中包装绑定。

function test() {
    // Logic
};

$('#btnTest').on('click', function () {
    console.log('button clicked');
    test();
});

Answer 4

• 在一个事件中，您一次调用两件事。

使用

function test() {
    console.log('button clicked');
}

OR

$('#btnTest').on('click', function () {
    console.log('button clicked');
});