Question

I have a div that contains another div. They are both dynamically created with some data pulled by an ajax request.

I have a click event that I’d like to attach to both the outer and inner div, but for some reason when i click on the area chrome renders in blue in the first image below, nothing happens

And here is the structure in the html pane

This is the function which does the event

$(document).ready(function () {
    $('body').click(function (event) {
        if ($(event.target).is('#INT-note')) {
            if (!$('#INT-note').hasClass('expanded_note')) {
                $('#INT-note').addClass('expanded_note');

                $('#INT-note').animate({
                    height: '300',
                    width: '200',
                    overflow: 'scroll'
                }, 500, function () {

                    $('#INT-note_text').fadeIn(100);
                });

            } else {

                $('#INT-note').removeClass('expanded_note');
                $('#INT-note_text').fadeOut(100);
                $('#INT-note').animate({
                    height: '45',
                    width: '45',
                    overflow: 'hidden'
                }, 500, function () {
                    //console.log('test');
                });
            }

        }
    });
});

Is there some way I can make the lower div receive clicks through the ‘top-level’ div, so that I don’t have so do like $('#lower, .upper') or something?

[pointer-events:none;][3] hasn’t worked for me so far,because it seems to fire click functions on divs below the one I want clicked. I’d like just to go down one level.

Thanks!

Answer 1

It seems there is a problem with the event binding, because the divs are dynamiclly inserted, use On instead click on the body, so It will attach the event automatically to new elements inserted.

 $('body').on('click',function (event) {
     //same code
 });