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

});