jQuery link 上的点击事件不会被 vanilla JS 捕获
jQuery click event on link won't get catched in vaniila JS
我正在使用以下 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 在 link 元素 <a href="#">
上触发点击事件。那就根本不行了。香草点击事件处理程序不会被触发。
Reproduction working on <b>
element
$('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>
相反,如果我将 link 元素替换为粗体元素 <b>
,它会按预期工作。
这是怎么回事?
Reproduction not working on <a>
element
$('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();
不幸的是,您无法在链接上的 jQuery 中触发本机点击处理程序,它在源代码中被禁用并且评论说 "For cross-browser consistency, don't fire native .click() on links"。
因此,您要么必须使用 jQuery $(document).on("click")
绑定文档点击处理程序,要么直接调用节点 clickHandler $('li').find('a')[0].click();
我正在使用以下 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 在 link 元素 <a href="#">
上触发点击事件。那就根本不行了。香草点击事件处理程序不会被触发。
Reproduction working on <b>
element
$('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>
相反,如果我将 link 元素替换为粗体元素 <b>
,它会按预期工作。
这是怎么回事?
Reproduction not working on <a>
element
$('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();
不幸的是,您无法在链接上的 jQuery 中触发本机点击处理程序,它在源代码中被禁用并且评论说 "For cross-browser consistency, don't fire native .click() on links"。
因此,您要么必须使用 jQuery $(document).on("click")
绑定文档点击处理程序,要么直接调用节点 clickHandler $('li').find('a')[0].click();