2

我正在使用以下 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();
4

1 回答 1

2

不幸的是，您不能在链接上触发 jQuery 中的原生点击处理程序，它在源代码中被禁用，并且评论说“为了跨浏览器的一致性，不要在链接上触发原生 .click()”。

因此，您要么必须使用 jQuery 绑定文档点击处理程序$(document).on("click")，要么直接调用节点 clickHandler$('li').find('a')[0].click();

于 2018-05-03T15:36:38.907 回答