Javascript Jquery:remove$（'；#id'；）。在（…）侦听器上，当元素'；s的id已更改

我正在尝试更改HTML表单提交按钮在提交后的功能（通过更改表单id）以用作切换。但是，当表单的id更改时，on（'submit'，函数）不会更新，并且仍然会被调用，尽管该id不再绑定到表单

update\u favorite（…）

在AJAX函数中被调用，但是为了简单起见，我已经从这个代码片段中删除了AJAX

                $('#add_favourite').on('submit', function(event){
                    event.preventDefault();
                    console.log('add');
                    update_favourite('add');
                });

                $('#remove_favourite').on('submit', function(event){
                    event.preventDefault();
                    console.log('remove');
                    update_favourite('remove');
                });


                function update_favourite(addOrRemove) {
                     if($('#add_favourite').length){
                        $('#remove_favourite').attr("onclick","");
                        $('#submitbutton').val('Remove from Favourites');
                        $('#add_favourite').attr("id","remove_favourite"); 
                    /*This doesn't make a difference
                        $('#remove_favourite').on('submit', function(event){
                            event.preventDefault();
                            console.log('remove');
                            update_favourite('remove');
                        });
                    */

                    }
                    else if($('#remove_favourite').length){
                        $('#remove_favourite').attr("onclick","");
                        $('#submitbutton').val('Add to Favourites');
                        $('#remove_favourite').attr("id","add_favourite");  
                    /*This doesn't make a difference 
                        $('#add_favourite').on('submit', function(event){
                            event.preventDefault();
                            console.log('add');
                            update_favourite('add');
                        });

                   */
                    }

                };

---

我的实现正确地更改了submit按钮和表单id，但onclick侦听器不会随着id的更改而更改。如有任何建议/更正，将不胜感激

使用off类似的方法

$（'add#u favorite'）。关闭（'submit'）

删除以前的事件处理程序，然后使用on方法添加具有更新id的新事件处理程序

编辑：

JSFIDLE（注释中）和我的解决方案不起作用，因为表单提交会刷新页面

如果我们将按钮类型从submit更改为button，那么它就可以工作了 下面的代码对我有用

$('#add_favourite').on('click', function (event) {
    event.preventDefault();
    $('#log').text('add');
    update_favourite('add');

});
function update_favourite(addOrRemove) {
    if ($('#add_favourite').length) {
        $('#add_favourite').off('click');
        console.log('add favourite is being removed');
        $('#submitbutton').val('Remove from Favourites');
        $('#add_favourite').attr("id", "remove_favourite");
        $('#remove_favourite').on('click', function (event) {
            event.preventDefault();
            $('#log').text('remove');
            console.log('remove');
            update_favourite('remove');
        });

    } else if ($('#remove_favourite').length) {
        console.log('remove favourite is being removed');
        $('#remove_favourite').off('click');
        $('#submitbutton').val('Add to Favourites');
        $('#remove_favourite').attr("id", "add_favourite");
        $('#add_favourite').on('click', function (event) {
            event.preventDefault();
            console.log('add');
            update_favourite('add');
        });
    }
}

---

有人发布了正确的答案，但在我尝试之前就将其删除了，经过一番尝试后，我能够实现我认为删除的答案告诉我的内容

他们的答案是更改

$（'add#u favorite'）。on（'submit'，function（event）{

为

$（document.body）。on（'submit'，'add#u favorite'，function（event）{

和adding

$（document.body）。off（'submit'，remove#u favorite'）；

删除侦听器

---

无论原始评论者发生了什么，谢谢！

为什么不使用

.prop（“disabled”，true）

禁用按钮？出于某种原因，提交按钮会断开JSIDLE，您能帮我先弄清楚原因吗？不管怎样，我发布了正确的答案。无论如何，谢谢！