how can add event on class hierarchy in jquery

Question

I want the following structure

<div class="test">
<div class="test1"> 
</div>
</div>

I am trying to right down click event on test1

$(".test .test1").click(function()
{

 });

but it's not binding.

Any help?

Are the elements dynamically added to the DOM? Also is it right click you want or a normal click? — Anton
– Anton, Commented Mar 13, 2014 at 15:45

Felix · Accepted Answer · 2014-03-13 15:44:00Z

1

You need:

$(".test .test1").click(function() {
     // Your code to handle when .test1 inside .test is clicked
});

or if you want to trigger click event on this element, then you can use .trigger():

$(".test .test1").trigger('click');

Also, remember to add your code inside DOM ready handler:

$(function() {
    $(".test .test1").click(function() {
         // Your code here
    });
});

If your element are added dynamically to the DOM, you need to use event delegation:

$('body').on('click', '.test .test1' , function() {
    // Your code here
});

answered Mar 13, 2014 at 15:44

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Did you try event delegation? check my answer.