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");
    });

现在你知道我这辈子都无法让考拉变得可点击。 parents 上的点击事件工作正常，我用作按钮的一些空 div 的点击事件工作正常，但由于某种原因我无法填充 child <div> 以使其可点击。

有什么想法吗？

我试过了，

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

    });

但它只记录每次点击 parent。

Answer 1

一种选择是收听 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

尝试像这样制作选择器“#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!!!");
});

这是一个Fiddle

div 在许多容器 Div 中的 OnClick 事件

OnClick event for div inside lots of container Divs

html

javascript

jquery

onclick