Jquery: удалить $ ('# id'). On (...) слушателя при изменении идентификатора элемента

Question

Я пытаюсь изменить функциональность кнопки отправки формы HTML, когда она была отправлена ​​(путем изменения идентификатора формы), для работы в качестве переключателя.Однако при изменении идентификатора формы функция on ('submit', function) не обновляется и вызывается, несмотря на то, что id больше не привязан к форме.update_favourite(...) вызывается внутри функции 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');
                        });

                   */
                    }

                };

Моя реализация корректно меняет кнопку отправки и идентификатор формы, но слушатель onclick не меняетс изменением идентификатора.Любые предложения / исправления будут высоко оценены!

Answer 1

Кто-то опубликовал правильный ответ, но удалил его, прежде чем я смог его попробовать, и после некоторой игры я смог реализовать то, что, как мне кажется, говорил мне удаленный ответ.

Их ответом было изменение $('#add_favourite').on('submit', function(event){ на $(document.body).on('submit', '#add_favourite', function(event){ и добавление $(document.body).off('submit', 'remove_favourite'); для удаления слушателя.

Что бы ни случилось с оригинальным комментатором, спасибо!

Answer 2

Используйте off метод, такой как $('#add_favourite').off('submit'), чтобы удалить предыдущий обработчик событий, а затем добавьте новый обработчик событий с обновленным идентификатором, используя on метод.

Редактировать:

jsfiddle (в комментариях) и мое решение не работает, потому что форма submit обновляет страницу.

Если мы изменим тип кнопки на button с submit, то это сработает, следуя коду, сработавшему для меня

$('#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');
        });
    }
}