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

Question

我遇到了一个 javascript 问题，可以简化如下：

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

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

使用

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

或

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

Answer 2

不要让 test 连接事件，因为每次执行 test 时，你都会重复连接它。

插图：

$('#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

最终你可以使用one功能。

test();

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

请在此处查看：fiddle

Call outer function from click event handler in javascript