在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

最终您可以使用one函数。

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

请在此处检查：小提琴

Answer 2

不要使test连接事件，因为您会反复连接它，每次执行test时。

iNTAD：

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

或

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