Control not coming inside divobject.children().on({'mousedown' ...});

Question

I am trying to get focus inside a particular ‘section’ inside a div on mouse click. I have written the following lines of code:

$('#my-div-id').children('.my-section-class').on({
    'mousedown' : function(e){
        var $item = $(this);
        $item.focus();
    }       
});

The sections are added inside a for loop inside the div based on some if statements.

There are five sections of the class ‘my-section-class’ inside the div and $('#my-div-id').children('.my-section-class').length is returning 5. But control never comes inside my function.

In the above code if I am ignoring the .children('.my-section-class'), control goes inside my function whenever I click inside the div. But I want to focus the particular section and not the entire div.

I have tried $('#my-div-id').children('.my-section-class').live('click',function(event) also, but this is giving the same behavior. I am getting control inside my function if I hard code the ID of a particular section instead of using the children() function.

Edit

The html code is added using a <c:forEach> tag and looks like this <c:ForEach ...> <section class="my-section-class">...</section> </c:ForEach>

Answer 1

Try

$('#my-div-id').on('mousedown', '.my-section-class', function(e) {
    var $item = $(this);
    $item.focus();
});