根据元素的id对其调用不同的事件

Call different events on an element depending on its id

本文关键字：调用 事件 元素 id      更新时间：2023-12-24

我有一个按钮：

<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");
       }

你知道为什么会这样吗？我能做些什么来解决这个问题吗？

我建议：

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演示。

我认为，问题是，在通过事件的id选择它之后，您将事件绑定到DOM节点，但该绑定只发生一次；并且当CCD_ 2可能改变时DOM节点保持不变（尽管CCD_ 3属性改变），这意味着只有一个函数绑定到该节点。

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

参考文献：

  • CCD_ 10
  • CCD_ 11

好的-这是你想要的吗：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函数不会运行。

当您添加对第二个id的调用onload:forsecond-id时，它当时不在DOM中，因此该函数不绑定到第二个id。

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

相关文章：