Слушатель событий трех уровней (от родителя до внука) - PullRequest
Новая
       34

Слушатель событий трех уровней (от родителя до внука)

0 голосов
/ 16 апреля 2019

У меня возникают проблемы при подключении слушателя событий к внуку.

Как родительский, так и дочерний щелчки работают как положено, щелчки только внуков не будут срабатывать.

Вот мой текущий код: 

/* Parent */
$('body').on('click', 'div.left-menu-item', function (e) {
    e.preventDefault();

    console.log('parent'); // <-- this works
});

/* Child */
$('body').on('click', 'div.left-menu-item div.dropdown', function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();

    console.log('child'); // <-- this works
});

/* Grandchild */
$('body').on('click', 'div.left-menu-item div.dropdown-menu.show a.edit', function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();

    console.log('grandchild'); // <-- this does NOT work
});

Разметка для кнопки, в которой возникла проблема: 

<a class="btn edit" data-unsp-sanitized="clean">
    <i class="fas fa-fw fa-pen"></i> <span>Edit</span>
</a>

Я также попытался установить для списка событий внука: 

$('body').on('click', 'a.edit', function(e){
    console.log('grandchild'); <-- this doesnt work either
});

Новое обновление.

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

$('body').on('click', '*', function(e){
    console.log('clicked');
});

В общей сложности 20 нажатий, но когда я нажимаю на .edit, щелчки по-прежнему не обнаруживаются.

Если я запускаю клик вручную $('.edit').trigger('click');, это работает ..

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

Проблема решена.

Внутри $(document).ready Я создал реальный объект с именем document (глупо, правда?), Который сводил все с ума.

Так что я просто переименовал var document = ....; в var documentObj = ....; и все заработало как положено.

Я все еще не совсем понимаю, почему некоторые из списков событий работают. Я понимаю, что переопределение документа не должно происходить, и, возможно, переопределение документа привело к тому, что $('body').on('...', '... не работает должным образом, поскольку тело является дочерним элементом документа? Но это не объясняет, почему так много обработчиков событий работало, и только один не вызывал событие щелчка.

0 голосов
/ 16 апреля 2019

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

$('div.left-menu-item').on('click', function(e){

  if( $(e.target).hasClass('dropdown') ) {
    // child logic
  } else if ( $(e.target).hasClass('edit') ) {
    // grandchild logic
  }
});
...