Как организовать программный клик по дочернему элементу?

Question

[Пычев Анатолий]

Здравствуйте.
Подскажите пожалуйста.
Требуется программно вызвать обработчик события 'click' для дочернего элемента. Собственно погуглив можно найти решение

$('родительский элемент').find('дочерний элемент').trigger('click')

, но получается зацикливание вызовов. Если я правильно понимаю, то это из за всплытия событий.

HTML структура

<div class="woof_container_inner woof_container_inner_">
     <h4> Товар По Сезону                                                                    
         <a href="..." class="woof_front_toggle woof_front_toggle_opened">...</a>
      </h4>
      <div class="woof_block_html_items" style="display: block;">...</div>
</div>

Сейчас реализовал так, работает

jQuery(document).ready(function($){

	(function(){
		var flag = true;
		$('.woof_container_inner h4').on('click', function () {
			if (flag){
				flag = !flag;
				$(this).find('.woof_front_toggle').trigger('click');
				flag = !flag;
			}
		});
	})();

});

, но что то подсказывает , что есть более элегантный способ.

Заранее благодарю

Comments

[ProjectSoft]

На .woof_front_toggle есть обработчик события?
Если есть, то e.preventDefault() в данном обработчике, где e - событие, которое передаётся аргументом в функчию-обработчик.

$element.on('click', function(e){
    e.preventDefault();
    /* code */
});

[Пычев Анатолий]

Спасибо за быстрый ответ.

На .woof_front_toggle есть обработчик события?

Да, есть, я его и вызываю. В его код лезть не могу, он в плагине. Если я его изменю, при след обновлении мои изменения затрутся.

$('.woof_container_inner h4').on('click', function (e) {
			e.preventDefault();
			$(this).find('.woof_front_toggle').trigger('click');
		});

не помогло. Зацикливание происходит. Я так понимаю, потому, что триггером генерируется новое событие.

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

[ProjectSoft]

Пычев Анатолий, организуйте пример в песочницу. https://jsfiddle.net/ или https://codepen.io/

Как понимаю WP
Организуйте своё подключение собственного скрипта или кастомизируйте плагин под другое имя.

Answer 1

[hzzzzl]

просто element.click() ?
https://codepen.io/anon/pen/KjeeQV

Comments

[Пычев Анатолий]

Благодарю
Странно, но в песочнице зацикливания нет.
Может потому, что нативный JS

на рабочем сайте через jQuery вызывает зацикливание.

Answer 2

[Игорь]

Что-нибуть слышали про делегирование событий?
С Вашего позволения, я процитирую пару строк из учебника...

Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому – мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком именно потомке произошло событие и обработать его.

Это как раз, то что нужно автору.

Comments

[Пычев Анатолий]

Спасибо, Игорь.

Дело в том, что я не могу менять исходный обработчик клика дочернего элемента. Мне надо эмулировать его нажатие при нажатии на родительском. Плагин выводит разметку в которой рядом с названием есть кнопка (+-) которая открывает и закрывает блок. Кнопка является дочерним элементом у блока с названием. Хочу что бы работало даже при нажатии на название. Писать свой код открытия и закрытия блока не вариант.

Т.е. получив элемент мне надо вызвать его событие "клик". Как только я это делаю, мой обработчик снова вызывается и происходит зацикливание.

[Stalker_RED]

Пычев Анатолий, проверяйте в своем обработчике был ли это настоящий клик (isTrusted) или нет.
Но вообще попахивает костылестроением.

Answer 3

[Пычев Анатолий]

Всем огромная благодарность.

Оказалось все проще. надо было просто проверять с какого объекта пришло событие. На мысль натолкнула статья порекомендованная Игорь Попрядухин.

в Итоге

jQuery(document).ready(function($){
	
	$('.woof_container_inner h4').on('click', function (e) {
		if ( e.target == this ){
			$(this).find('.woof_front_toggle').click();
		}
	});

});