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 。 这是怎么回事：

约翰，在这里，拿着这个。 您的名字现在叫玛莎。 你为什么还拿着它？！ 你的名字是玛莎现在，我没把那个给你，我把它给了约翰，跆拳道？

您正在通过其ID来获取元素，然后在该元素上绑定一个click处理程序（不是名称！）。 稍后，您更改其名称，但是它仍然具有相同的click处理程序。

我假设您在名称更改发生之前绑定了cancel单击处理程序； 在这种情况下，您大喊：

玛莎，拿着那个！

毫不奇怪，没有人上台阶-没有名为cancel_competition_button元素，因此零个元素获得了闪亮的新click处理程序。

---

您要做的是，不是将处理程序绑定到元素，而是使用jQuery的“实时”事件绑定到名称。 您可以通过将事件绑定到父项并选择要检查的选择器来实现。 假设您有这样的事情：

<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>

现在您可以执行以下操作：

哟，迈克！ 每当有人要约翰时，找到他并告诉他这样做。 每当有人要玛莎时，就找她并告诉她去做。

或者，在代码中：

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

Answer 2

您可以使用event delegation来注册事件处理程序：

$(document).on('click', 'div.option_long', function (e) {

    // Check for the clicked div id here first using `e.target.id`
    if (e.target.id === 'enter_competition_button') {

        // make the ajax call here   
        $.ajax({...});

    } else if (e.target.id === 'cancel_competition_button') {
        alert("Canceled");
    }
});

如果可能，请在此处使用最接近的静态父ID或类更改document ，假设一个ID为container的父元素，代码将被修改为：

$('#container').on('click', 'div.option_long', function (e) {

    // Check for the clicked div id here first using `e.target.id`
    if (e.target.id === 'enter_competition_button') {

        // make the ajax call here   
        $.ajax({...});

    } else if (e.target.id === 'cancel_competition_button') {
        alert("Canceled");
    }
});

这会将您的事件附加到#container元素内的任何div上，从而减少了必须检查整个document元素树的范围并提高了效率。

Answer 3

由于在尝试创建事件处理程序时cancel_competition_button存在ID为cancel_competition_button元素，因此您的jquery元素选择为空，并且单击处理程序不能附加为空。 更改ID后，将处理程序注册放入您的成功回调中。 使用这种方法时，我还将在其中单击控件的取消绑定调用，以避免多次注册。

编辑：尽管这应该可行，但@Amadan解决方案更优雅，更干净，在我看来，绝对是您应该使用的方式。