我希望在我的主div(.main
)上有一个事件监听器。我想检测article
的孩子header
的点击次数。我的代码尝试如下:
var area = $('article.small-post').children('.inner').children('header');
var area = $('article.small-post > .inner > header');
var area = 'article.small-post > .inner > header';
$('.main').on('click', area, function() {
alert('bam');
});
area
代码都不起作用。只有当我放置单article.small-post
时,代码才会触发。哪里是我的错?
HTML:
<div class="main">
<article class="small-post">
<div class="inner">
<header>
title
</header>
<div class="entry">
entry
</div>
<footer class="footer"></footer>
</div>
</article>
</div>
答案 0 :(得分:3)
首先,只有area3
才有效,因为.on
第二个参数接受字符串。
然后,你有一个额外的括号:
$('.main').on('click', area#, function() {alert('bam');}});
^-here
删除它并且它可以正常工作
$('.main').on('click', area3, function() {alert('bam');});
答案 1 :(得分:1)
也许这会对你有所帮助。当然,您可以将$main
直接放入内联。
var $main = $(".main");
$main.on("click", "header", function() {
alert("header clicked");
});
答案 2 :(得分:1)
你可以试试这个:
$('.main article header').on('click', function() {
// some code...
});
或试试这个:
$('.main article').on('click', 'header', function() {
// some code...
});
您可以找到here解释的差异。
我希望这会有所帮助。
答案 3 :(得分:0)
为什么不这样做?
$('.main article header').click(function(){
alert('bam');
});
这是将在主类内的文章标签中的所有标题元素上触发警报。
答案 4 :(得分:0)
您希望使用事件委派来从一个父元素中检测到所有子点击。
示例如下:
$('.my-parent-class').on('click','.my-inner-element',doSomething);
此处有更多信息:http://api.jquery.com/on/
答案 5 :(得分:0)
如果我找对你,这可能会解决你的问题。
请参阅JSfiddle链接:http://jsfiddle.net/90xn59ot/3/
JS代码:
// Little modifications
var area = $('article').children('div.inner').children('header'),
area2 = $('article > .inner > header'),
area3 = 'article > .inner > header';
// Basically with the single element
// If you have more than one element
// -> simply loop over them...
//
// @example
//
// for(var i = 0; i < area.length; i++) {
// $('div.main').on('click', area[i].tagName, function () {
// #code goes here...
// }
// }
$('div.main').on('click', area[0].tagName, function () {
alert('Activate me only');
area[0].style.backgroundColor = getRandomColor();
area[0].style.color = getRandomColor();
});
// This one is just for fun...
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
答案 6 :(得分:-1)
试试这个:
$(function(){
var $main = $('.main');
$main.on('click', function(e){
var $target = $(e.target),
$header = $('header');
if($target.is($header)){
//do something
}
});
});
点击.main
,您就会向点击target
的功能发送点击事件参数。如果该目标在声明$main
之前,请执行某些操作。