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选择事件后将事件绑定到DOM节点，但该绑定发生一次;虽然id可能会更改DOM节点保持不变（尽管id属性更改），这意味着只有一个函数绑定到该节点。

我在这里使用的替代方法将点击处理程序绑定到body元素（尽管你应该绑定到button的最近的祖先元素，不是 body，除非你别无选择），然后评估click事件起源于哪个元素。在这种情况下，this引用被点击的事件，其中检查了id属性，如果匹配，则调用相关函数。

参考文献：

on()。
prop()。

Answer 2

好的 - 这就是你想要的：http://jsfiddle.net/Fs24R/

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


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


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

}

说明：当你更改id时 - 你必须设置onclick函数 - 因为页面没有再次加载 - 因此初始的onload函数将不会运行。

当您添加调用onload时：对于第二个id - 当时它不存在于DOM中 - 因此该函数不会绑定到第二个id。

因此，您必须在更改元素ID的位置绑定函数。

根据元素的ID调用元素上的不同事件

2 个答案: