javascript - on() jQuery not working on children of a div -

javascript - on() jQuery not working on children of a div -

html code:

<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 code:

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

the next code works not want:

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

assuming div elements added dynamically, you'll need delegate click event div elements passing in "div" selector sec argument within jquery's on() method:

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

from jquery's on() documentation:

when selector provided, event handler referred delegated. handler not called when event occurs straight on bound element, descendants (inner elements) match selector. jquery bubbles event event target element handler attached (i.e., innermost outermost element) , runs handler elements along path matching selector.

javascript jquery onclick children