Событие jQuery click по ссылке не будет отслеживаться в vaniila JS - PullRequest
Новая
       33

Событие jQuery click по ссылке не будет отслеживаться в vaniila JS

0 голосов
/ 03 мая 2018

Я использую следующую привязку Vanilla для имитации события делегирования jQuery: 

document.addEventListener('click', function(e) {
    console.log("some element was clicked");
    console.log(e.target);

    //here's where I would filter by target
});

Все работает нормально, кроме случаев, когда я пытаюсь с помощью jQuery вызвать событие щелчка на элементе ссылки <a href="#">. Тогда это не будет работать вообще. Обработчик события щелчка ванили не сработает.

Воспроизведение, работающее на элементе <b> 

$('button').click(function() {
    $('ul').append('<li><b>New</b></li>');
});

document.addEventListener('click', function(e) {
    console.log("some element was clicked");
    console.log(e.target);
});

$(document).on('keydown', function(){
    console.warn("-------Trigger--------")
	$('li').find('b').trigger('click');
});
div{
    background: yellow;
    padding:10px 20px;
    border: 1px solid #ccc;
    margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add element</button>
<span id="trigger">Trigger</span>
<div>
 Just focus the white panel and press any key. That will trigger the jQuery.click() event as you can see in the code.
</div>
<ul>
    <li>Old element</li>
    <li>Old element</li>
    <li><b>Old element</b></li>
</ul>

Вместо этого, если я заменяю элемент ссылки на жирный <b>, он работает как положено. В чем дело? Воспроизведение не работает на <a> элементе 

$('button').click(function() {
    $('ul').append('<li><a href="#">New</a></li>');
});

document.addEventListener('click', function(e) {
    console.log("some element was clicked");
    console.log(e.target);
});

$(document).on('keydown', function(){
    console.warn("-------Trigger--------")
	$('li').find('a').trigger('click');
});
div{
    background: yellow;
    padding:10px 20px;
    border: 1px solid #ccc;
    margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add element</button>
<span id="trigger">Trigger</span>
<div>
 Just focus the white panel and press any key. That will trigger the jQuery.click() event as you can see in the code.
</div>
<ul>
    <li>Old element</li>
    <li>Old element</li>
    <li><a href="#">Old element</a></li>
</ul>

И нет, я не хочу использовать [0] так: 

$('li').find('a')[0].click();

Я хочу, чтобы он работал нормально: 

$('li').find('a').click();

1 Ответ

0 голосов
/ 03 мая 2018

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

Итак, вам придется либо связать обработчик кликов документа с помощью jQuery $(document).on("click"), либо напрямую вызывать узлы clickHandler $('li').find('a')[0].click();

...