大量容器Div中的div的OnClick事件

Question

我有一個正在開發的應用程序，單擊<div>時需要觸發onclick()事件。

換句話說，

<div id="panda"></div>

 $("#panda").click(function () {
        console.log("some text");
    });

因此，此語句有效，但現在讓我說，

    <div id="panda">
    <lots of children>
     <div id="koala">
    </div>
    </lots of children>
    </div>


 $("#koala").click(function () {
        console.log("doesnt work");
    });

現在，您看到了我的一生，我無法讓無尾熊變得可點擊。 父母的click事件工作正常，對於用作按鈕的某些空div的單擊事件也可以正常工作，但是由於某些原因，我無法讓孩子填寫<div>使其可單擊。

任何想法可能是什么情況？

我試過了

 $('#panda').click(function(e){
        if ($(e.target).is('#koala'))
        {
            console.log("koala");
        }

    });

但這只會記錄對父項的每次點擊。

Answer 1

一種選擇是聽div孩子講panda 。

 $("#panda").on('click','div',function() { console.log($(this).text()+' '+$(this).attr('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="panda"> <div id="koala"> koala </div> <div id="bear"> bear </div> </div> 

Answer 2

嘗試使選擇器像這樣#panda #koala

$("#panda #koala").click(function () {
        console.log("koala");
    });

Answer 3

這是一個例子

<div id="panda">Panda
    <div id="koala">Koala</div>
</div>

$("#panda").on('click', '#koala', function () {
    alert("koala!!!");
});

這是小提琴