Question

我正在用Express.js编写一个简单的单页面应用程序。页面底部是一个表单，此表单用于将用户添加到表或更新特定用户。提交＆＃39;按钮将具有不同的功能，具体取决于按下时按钮的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);
});

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

Answer 2

您可以使用事件委派设置处理程序来获得所需的效果：

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

通过这样做，您可以推迟对元素的检查，直到实际发生“点击”为止。使用您的代码，元素位于处理程序分配时。之后，“id”值是什么并不重要，因为处理程序直接与DOM节点相关联（通过jQuery维护的内部映射）。

Answer 3

这不会起作用，因为当就绪功能执行时，click事件被分配一次。我认为更好的方法是使用两个按钮并显示/隐藏它们而不是更改id。另一种方法是将所需的操作存储在属性中：

$('#mybutton').click(function() {
    var action = $(this).attr("data-action");
    if(action == "do_this")
    // ...
});

要改变行动：

$('#mybutton').attr("data-action", "do_this");

按钮的ID更改，但document.ready函数调用以前的值的方法

3 个答案: