javascript - 按钮的 ID 发生变化，但 document.ready 函数调用先前值的方法

Question

我正在使用 Express.js 编写一个简单的单页应用程序。页面底部是一个表单，该表单用于向表中添加用户，或者更新特定用户。 “提交”按钮将具有不同的功能，具体取决于按下按钮时的按钮 ID。

在我的 document.ready 函数中，我有两行感兴趣:

$('#btnAddUser').on('click', addUser);
$('#btnUpdateUser').on('click', updateUser);

我还有一些方法可以将此 id 的值从 #btnAddUser 更改为 #btnUpdateUser，反之亦然。我可以去换个ID。问题是 document.ready 函数似乎没有考虑这些更改。

例如，应用程序以 ID #btnAddUser 启动。然后我将其更改为具有 Id #updateUser，我可以看到这是有效的。但是，当我按下按钮时，会触发 addUser 方法而不是 updateUser 方法，我不确定为什么。

Answer 1

Pointy 的答案应该有效，但这是一个 X->Y problem 。您不应该尝试通过更改元素的 ID 来切换功能。

相反，在某个地方存储一个值来说明按钮应该做什么，然后使用它。如果需要，您可以在按钮上使用 data-* 属性:

<!-- Dynamically change  data-action  and  value  as needed -->
<input id="btnUserAction" type="button" data-action="add" value="Add" />

$('#btnUserAction').on('click', function (e) {
    var action = ($(this).data("action") === "add") ? addUser : updateUser;

    action.call(this, e);
});

或者，您可以有两个单独的按钮并显示/隐藏它们。任何一种方法都应该有效。