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

Question

I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.

So in other words,

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

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

So this statement works but now lets say I have,

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


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

Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.

Any ideas what the case could be?

I tried this,

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

    });

But it just logs every click on the parent.

Answer 1

One option is to listen to the div children for 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

Try making the selector '#panda #koala' like this

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

Answer 3

Here is an example,

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

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

Here is a Fiddle