Javascript jQuery：更改divid，提供不同的点击功能

我有一个div作为用户执行任务（例如，进入竞赛）的按钮，如下所示

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

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

一旦插入成功，它就成功地将div的id从“enter_competition_button”更改为“cancel_competition_button”。我已经为id为“cancel\u competition\u button”的div添加了jQuery事件处理程序，如下所示

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

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

但是，当我单击同一个div（cancelentry）时，jQuery仍然将其识别为“enter\u competition\u button”，而不是“Cancel\u competition\u button”，后者将执行第二次插入

关于解决这个问题有什么建议吗？提前谢谢

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

$(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或类更改

文档

，比如将ID为的父元素更改为

容器

，代码将修改为：

$('#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).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或类更改

文档

，比如将ID为的父元素更改为

容器

，代码将修改为：

$('#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， 减少必须检查整个

文档的范围

元素树并提高效率。

它不会将其“识别”为

输入竞争按钮

。结果是：

约翰，拿着这个。你现在叫玛莎。你为什么还拿着它？！？你的名字是玛莎，我没有给你，我给了约翰，wtf

您通过元素ID获取元素，然后绑定元素上的

单击
处理程序（而不是名称！）。稍后您更改了它的名称，但它仍然具有相同的
单击
处理程序

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

玛莎，拿着

而且，毫不奇怪，没有人站出来——没有名为
cancel\u competition\u button
的元素，因此零元素得到了它们闪亮的新
点击处理程序


您要做的是，使用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>

它不会将其“识别”为
enter\u competition\u按钮
。结果是：

约翰，拿着这个。你现在叫玛莎。你为什么还拿着它？！？你的名字是玛莎，我没有给你，我给了约翰，wtf

您通过元素ID获取元素，然后绑定元素上的
单击
处理程序（而不是名称！）。稍后您更改了它的名称，但它仍然具有相同的
单击
处理程序

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

玛莎，拿着

而且，毫不奇怪，没有人站出来——没有名为
cancel\u competition\u button
的元素，因此零元素得到了它们闪亮的新
点击处理程序


您要做的是，使用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>

由于在尝试创建事件处理程序时，不存在id为“取消竞争”按钮的元素，因此jquery元素选择为空，并且单击处理程序不能附加到任何内容。id更改后，将处理程序注册放在成功回调中。在使用这种方法时，我还会在其中添加一个针对click处理程序的unbind调用，以避免多次注册

编辑：虽然这应该可以工作，@Amadan解决方案更优雅、更干净，而且在我看来，这绝对是您应该走的路。
因为在您尝试创建事件处理程序时，不存在id为“取消竞争”按钮的元素，您选择的jquery元素为空，不能将单击处理程序附加到空。id更改后，将处理程序注册放在成功回调中。在使用这种方法时，我还会在其中添加一个针对click处理程序的unbind调用，以避免多次注册

编辑：虽然这应该行得通，@Amadan解决方案更优雅、更干净，在我看来，这绝对是你应该走的路。
非常感谢你的解释和现实的例子！您帮助我进一步了解了绑定事件处理程序的工作原理。你的代码工作得很好！非常感谢！非常感谢您的解释和现实的例子！您帮助我进一步了解了绑定事件处理程序的工作原理。你的代码工作得很好！非常感谢！