javascript - 根据元素的 id 调用不同的事件

Question

我有一个按钮:

<button id="end-action">End action</button>

我正在尝试更改按钮的文本和 ID 以响应单击事件。

$("#end-action").click(endAction);
$("#end-turn").click(endTurn);

当我点击按钮时，它成功调用了 endAction 函数(如下)，并将按钮的 id 正确设置为“end-turn”。但是，当按钮的 id 为“end-turn”时，如果我单击该按钮，仍然会调用“end-action”id 事件处理程序。

       function endAction(){
    $("#end-action").text("End Turn");
    $("#end-action").attr("id", "end-turn");
       }

       function endTurn(){
    $("#end-turn").text("End Action");
    $("#end-turn").attr("id", "end-action");
       }

您知道这是为什么以及我可以采取什么措施来解决这个问题吗？

Answer 1

我建议:

function endAction() {
    $("#end-action").text("End Turn");
    $("#end-action").prop("id", "end-turn");
}

function endTurn() {
    $("#end-turn").text("End Action");
    $("#end-turn").prop("id", "end-action");
}
$("body").on('click', '#end-action, #end-turn', function(){
    switch (this.id) {
        case 'end-turn':
            endTurn();
            break;
        case 'end-action':
            endAction();
            break;
    }
});

JS Fiddle demo .

我认为问题是，在通过 id 选择事件后，您将事件绑定(bind)到 DOM 节点，但该绑定(bind)发生一次；虽然 id 可能会更改，但 DOM 节点保持不变(尽管 id 属性发生更改)，这意味着只有一个函数绑定(bind)到该节点。

我在这里使用的替代方案将点击处理程序绑定(bind)到 body 元素(尽管您应该绑定(bind)到 button 最接近的祖先元素，< em>不是 body，除非你别无选择)，然后评估 click 事件源自哪个元素。在本例中，this 指的是被单击的事件，该事件已检查其 id 属性，如果匹配，则调用相关函数。

引用文献:

• on() .
• prop() .