Question

我正在尝试在Javascript中创建一个按钮，单击该按钮时会向某些PHP代码发送一个AJAX请求。

我已经设置了3个按钮来执行相同的操作并且它们都正常工作。

最离奇的是，如果我直接调用该方法，它运行正常。

按钮的代码：

<button id="toggle-button">Toggle</button>

Javascript：

var toggleButton = document.getElementById('toggle-button');
...
function init()
{
    ...
    toggleButton.onClick = handleToggleClick;
    ...
}

function handleToggleClick(event)
{
    alert("Sending Request");
    var admin_url = "http://localhost/wp-admin/admin-ajax.php";
    var data = {
        action : 'toggle',
    }
    $.post(admin_url, data, function(resp) {
        alert(resp);
    });
}

我在Chrome开发者工具控制台中调用了以下内容：

handleToggleClick(null); // The request is sent
autoScheduleButton.onClick(); // The request is sent
autoScheduleButton.onClick; //It prints out the function
autoScheduleButton; //It displays the HTML of the button.

正如我之前提到的，还有其他3个按钮几乎完全相同并且工作正常，所以我真的不明白为什么这不起作用。

希望这只是我错过的非常明显的事情。

编辑：

最初我在匿名代码时出错了，上面的代码现在在init方法中是正确的。

上一个代码：函数init（） { ... toggleButton.onClick（）= handleToggleClick; ... }

Answer 1

在init功能中，您有toggleButton.onClick() = handleToggleClick;之类的代码。这意味着您将onClick()函数的结果分配给handleToggleClick。

您需要分配到onClick而不是调用它。请改为toggleButton.onClick = handleToggleClick;

function init()
{
    ...
    toggleButton.onClick = handleToggleClick;
    ...
}

Answer 2

toggleButton.onClick() = handleToggleClick;函数中的代码init不是正确的赋值。它实际上意味着您在toggleButton上调用onClick函数，然后分配给结果handleToggleClick。

将其更改为toggleButton.onClick= handleToggleClick，这意味着您正在收听toggleButton上的点击事件，然后调用函数handleToggleClick

Javascript按钮OnClick无法正常工作，方法正常运行

2 个答案: