jQuery的on看不到子元素

Question

我想在我的主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>

Answer 1

首先，只有area3意志的工作，因為.on第二個參數接受字符串。

然后，您有了一個額外的括號：

$('.main').on('click', area#, function() {alert('bam');}});
                                                        ^-here

刪除它就可以了

$('.main').on('click', area3, function() {alert('bam');});

http://jsfiddle.net/ondd6nw7/

Answer 2

也許這對您有幫助。 當然，您可以將$main直接內聯。

var $main = $(".main");

$main.on("click", "header", function() {
    alert("header clicked");
});

看我的小提琴

Answer 3

您可以嘗試以下方法：

$('.main article header').on('click', function() {
    // some code...
});

或嘗試以下方法：

$('.main article').on('click', 'header', function() {
    // some code...
});

您可以找到此處說明的區別。

我希望這有幫助。

Answer 4

你為什么不這樣做呢？

$('.main article header').click(function(){
  alert('bam');
});

這是因為警報將在主類內的商品標簽中的所有標頭元素上觸發。

Answer 5

您想使用事件委托來從一個父元素中檢測到所有子點擊。

一個示例如下所示：

$('.my-parent-class').on('click','.my-inner-element',doSomething);

此處提供更多信息： http : //api.jquery.com/on/

Answer 6

如果我說對了，這可能會解決您的問題。

參見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;
}

Answer 7

嘗試這個：

$(function(){
    var $main = $('.main');

    $main.on('click', function(e){
        var $target = $(e.target),
            $header = $('header');

        if($target.is($header)){
            //do something
        }
    });
});

通過單擊.main ，您會將click事件參數發送給捕獲click target的函數。 如果該目標在聲明$main之前，請執行某些操作。