Запретить выполнение одного кода при нажатии на другой элемент в jquery / javascript

Question

У меня проблема с кодом, в js у меня есть два события onclick, одно из которых нужно выполнить, когда щелчок мышью по элементу td в таблице выполнял, а другое - при нажатии на элементы (.eb_edit) внутри этого td.

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

Вот код:

$(document).on('click', '.eb_edit', function() {
    fetch_data_selected_update($('#konto_select').val(), $(this).attr('update_id'));
});

$(document).on('click', 'td', function() {
    fetch_data_selected_insert($('#konto_select').val(), $(this).attr('day'));
});

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

Конечно, я Можно создать страницу с всплывающим окном для каждого дня и для каждого элемента, но страница загружается слишком долго, так что это не решение. Я предпочитаю создавать элементы динамически при нажатии на элемент, используя ajax.

Надеюсь, вы понимаете, как я могу это решить?

Answer 1

вы можете достичь этого, используя stopPropagation, это остановит выполнение родительских слушателей, когда событие произойдет в дочернем элементе

$(document).on('click', '.eb_edit', function(event) {
   fetch_data_selected_update($('#konto_select').val(), $(this).attr('update_id'));
   event.stopPropagation();

});

Взгляните на здесь