上（）jQuery的不工作的一个div

Question

HTML代码孩子：

<input type="text" name="subcat" class="subcat input1"/> 
<div class="input dispsubcat" id="dispsubcat"> 
    <div class="sub"> abc</div> 
    <div class="sub"> xyz</div> 
</div 

jQuery代码：

$(".input").children("div").on("click",function(){ //does not work 
    console.log("hello"); 
}) 

$(".sub").on("click",function(){ //also does not work 
    console.log("hi"); 
}) 

下面的代码工作这不是我想要的：

$(".input").on("click",function(){ console.log("ab");}) 

Answer 1

假设这些div元素是动态添加的，您需要将click事件委托给您的div个元件通过在"div"选择器传递作为jQuery的on()方法中的第二个参数：

$(".input").on("click", "div", function() { 
    ... 
}); 

从jQuery's on() documentation：

当提供一个选择器，该事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用该处理程序，而只会为与选择器匹配的后代（内部元素）调用该处理程序。 jQuery将事件从事件目标引发到处理程序所附的元素（即，最内层到最外层的元素），并沿着匹配选择器的路径上的任何元素运行处理程序。

Answer 2

包裹你的代码时，DOM是准备与jQuery 准备 API

$(document).ready(function(){ 
$(".input").children("div").on("click",function(){ //does not work 

    console.log("helo"); 

}) 

$(".sub").on("click",function(){ //also does not work 
    console.log("hi"); 
}) 

});