Question

我正在尝试更改HTML表单提交按钮的功能（通过更改表单的ID）以用作切换。但是，当更改表单的id时，on（'submit'，function）不会更新，并且仍然会被调用，尽管id不再与表单绑定。在AJAX函数中调用了update_favourite(...)但是为了简单起见我已经从这个代码片段中删除了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');
                        });

                   */
                    }

                };

我的实现正确地更改了提交按钮和表单ID，但是onclick侦听器不会随着id的变化而改变。任何建议/更正都将非常感谢！

Answer 1

有人发布了正确的答案，但在我尝试之前删除了它，经过一些游戏，我能够实现我认为删除的答案告诉我的内容。

他们的回答是将$('#add_favourite').on('submit', function(event){更改为$(document.body).on('submit', '#add_favourite', function(event){并添加$(document.body).off('submit', 'remove_favourite');以删除侦听器。

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

Answer 2

使用关闭方法 df = df.iloc[indices[::-1]] 删除以前的事件处理程序，然后使用 on 方法添加具有更新ID的新事件处理程序。

编辑：

jsfiddle（在评论中）并且我的解决方案无法正常工作，因为表单提交会刷新页面。

如果我们将按钮类型从提交更改为按钮，那么它将起作用以下代码为我工作

$('#add_favourite').off('submit')

Jquery：当元素的id改变时，删除$（'＃id'）。on（...）listener

2 个答案: