Как избежать накопления детских событий

Question

У меня проблема с jquery Я делаю CRUD, и я использую таблицы данных плагина для отображения всех записей и для возможности выполнения некоторых действий с ними, таких как в этом примере обновление и это то, что я пытаюсь сделать, но у меня есть некоторые проблемы с jquery,

У меня есть два обработчика событий, первый связан с нажатием кнопки редактирования, которая уже объявлена ​​на стороне сервера с Атрибут data-id, чтобы я мог получить доступ к идентификатору для каждого клика каждой записи, а второе событие является дочерним по отношению к первому событию, связанному с отправкой формы (форма редактирования), я объявил его дочерним, чтобы иметь доступ к тому же идентификатору нажатой кнопки

проблема в том, что при каждом нажатии кнопки редактирования накапливается второе событие (например, если мы нажимаем кнопку три раза, отправка выполняется три раза). автоматически и та же проблема для идентификатора, когда я console.log () я получаю три разных идентификатора) Я просто хочу знать, есть ли способ избежать этого накопления Действие событий.

$('#table').on('click','.eventEdit',function(){
            var id = $(this).data('id'); // i need this id to get the form data on the edit to                            populate the inputs
            // and to update the record in the database
            console.log(id);
            $('#eventEditForm').on('submit',function(e){
                console.log(id);

                e.preventDefault();
                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
                $.ajax({
                    type: 'POST',
                    url: "/admin/evenment/event/"+id,
                    data: $(this).serialize(),
                    success: function(data){
                        $('#eventEditModal').modal('hide');
                        $('#table').DataTable().ajax.reload();
                        swal('Modifié','evenment a bien etait modifié','success');
                    },
                });
            });

Надеюсь, это не слишком сложно

Answer 1

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

Таким образом, каждый последующий щелчок будет выполнять отправку для каждого добавленного вами события (из каждого щелчка ).

Не видя, как устроен ваш html, я могу только предложить, чтобы вы вызвали функцию, которая отправляет форму из вашего события click. Вы можете передать любые данные, которые вам нужны, в эту функцию из события click.

Answer 2

Я решил проблему, я объявил событие submit из события click и для доступа к идентификатору я прикрепил его к объекту окна, и теперь оно работает нормально

$('#table').on('click','.eventEdit',function(){
            window.event_id = $(this).data('id');
            console.log(window.event_id);
            //code
});
$('#eventEditForm').on('submit',function(e){
                var id = window.event_id;
                e.preventDefault();
                $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
                $.ajax({
                    type: 'POST',
                    url: "/admin/evenment/event/"+id,
                    data: $(this).serialize(),
                    success: function(data){
                        $('#eventEditModal').modal('hide');
                        $('#table').DataTable().ajax.reload();
                        swal('Modifié','evenment a bien etait modifié','success');
                    },
                });
            });