javascript - jQuery:更改div id，提供不同的点击功能

Question

我有一个 div 作为用户执行任务(例如，参加比赛)的按钮，如下所示。

<div id="enter_competition_button" class="option_long hovertext" data-hovertext="Click to enter this competition">Enter This Competition</div>

下面显示的是 jQuery Ajax，用于在用户单击上面的按钮后插入新的竞争对手。

$("#enter_competition_button").click(function(){
    $.ajax({
        type:"post",
            url:"/caseproject/competition/Controller/ajax/enter_competition.php",
        data:{username:username,competitionId:competitionID,classBelong:classBelong},
        beforeSend: function(){
            $("#enter_competition_button").text("Entering...");
        },
        success: function(data){
            if(data==0){
                $("#enter_competition_button").text("Failed!");
            } else if(data==1){
                $("#enter_competition_button").text("Cancel Entry");
                $("#enter_competition_button").attr("id", "cancel_competition_button");
            } else {
                $("#enter_competition_button").text("Error!");
            }
        }
    });
});

插入成功后，就成功将div的id从“enter_competition_button”更改为“cancel_competition_button”。我已经为 id 为“cancel_competition_button”的 div 添加了 jQuery 事件处理程序，如下所示。

$("#cancel_competition_button").click(function(){
    alert("Canceled");
});

但是，当我单击同一个 div(取消输入)时，jQuery 仍然将其识别为“enter_competition_button”而不是“cancel_competition_button”，从而执行第二次插入。

有什么解决这个问题的技巧吗？提前致谢。

Answer 1

它不会将其“识别”为enter_competition_button。发生的事情是这样的:

Here, John, hold this. Your name is now Martha. Why are you still holding it?!? Your name is Martha now, I did not give that to you, I gave it to John, wtf?

您将通过 ID 获取元素，然后在该元素上绑定(bind)一个 click 处理程序(而不是名称!)。后来您更改了它的名称，但它仍然具有相同的click 处理程序。

我假设您在名称更改发生之前绑定(bind)了cancel点击处理程序；在这种情况下，你大喊:

Martha, hold that!

不出所料，没有人站出来 - 没有名为 cancel_competition_button 的元素，因此零个元素获得了 Shiny 的新 click 处理程序。

<小时/>

您想要做的是，不要将处理程序绑定(bind)到元素，而是使用 jQuery 的“实时”事件绑定(bind)到名称。您可以通过将事件绑定(bind)到父级来完成此操作，并使用选择器进行检查。假设你有这样的东西:

<form id="button_holder">
    <div id="enter_competition_button" class="option_long hovertext" data-hovertext="Click to enter this competition">Enter This Competition</div>
</form>

现在你可以这样做:

Yo, Mike! Whenever someone asks for John, find him and tell him to do this. And whenever someone asks for Martha, find her and tell her to do that.

或者，在代码中:

$("#button_holder").
    on("click", "#enter_competition_button", function(){
        // ... your old click handler goes HERE
    }).
    on("click", "#cancel_competition_button", function(){
        alert("Canceled");
    });