jQuery event click in nested divs

Question

I got a page that loads content dynamically.

This is the resumed HTML code generated by page_ONE.php

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(document).on('click', "#contentarea_ONE a", function(ev) { 
            ev.preventDefault();
            ev.stopPropagation();
            ev.stopImmediatePropagation();
            $('#contentarea_ONE').load($(this).attr('href'));
            return false;
    });
    });
</script>
<div id="contentarea_ONE">
</div>
</body>

I have the ALMOST SAME code for page_TWO.php and page_THREE.php, just changing ONE for TWO or THREE wherever it corresponds.

I have buttons in each page that permits me to load page_TWO.php inside #contentarea_ONE, and page_THREE.php inside #contentarea_TWO.

Firebug shows me this as the HTML in navigator memory:

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(document).on('click', "#contentarea_ONE a", function(ev) { 
            ev.preventDefault();
            ev.stopPropagation();
            ev.stopImmediatePropagation();
            $('#contentarea_ONE').load($(this).attr('href'));
            return false;
    });
    });
</script>
<div id="contentarea_ONE">

<div id="contentarea_TWO">

<div id="contentarea_THREE">

</div>
</div>
</div>
</body>

Well, this is the problem: when I have the three pages loaded in that nested way, when I click a link like <a href="xxx/yyy"> inside div #contentarea_THREE, although I would expect the content loads inside contentarea_THREE, the content is loaded inside the div #contentarea_TWO.

Why does that occur?

I don't think your javascript is loaded on the included files. Try replacing your on click event handler in page two with an alert and I suspect it's the function in page one that's called instead of page 2? — MyStream
– MyStream, Commented Mar 25, 2013 at 10:48
"I have buttons in each page that permits me to load page_TWO.php inside #contentarea_ONE, and page_THREE.php inside #contentarea_TWO." Is that actually correct, or did you mean page_TWO.php goes in #contentarea_TWO and page_THREE.php goes in #contentarea_THREE? — Anthony Grist
– Anthony Grist, Commented Mar 25, 2013 at 11:04
It's like I write it... the page_TWO loads inside the div contentarea_ONE. Anyway, don't worry. The Jai's solutions resolved the problem. Thank you for your time. — Mario S
– Mario S, Commented Mar 25, 2013 at 11:07

Jai · Accepted Answer · 2013-03-25 11:07:00Z

2

You can try with this:

$(document).ready(function() {
    $(document).on('click', '[id^="contentarea_"] a', function(ev) { 
        ev.preventDefault();
        ev.stopPropagation();
        $(this).closest('[id^="contentarea_"]').load($(this).attr('href'));
    });
});

See first of all all your divs are starting with same id initials or i might say they have contentarea_ in common. so try using attr selectors and when you are clicking the links inside this div then try finding out the closest div with same id initials $(this).closest('[id^="contentarea_"]') and perform the load.

edited Mar 25, 2013 at 11:07

answered Mar 25, 2013 at 10:57

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

2 Comments

Anthony Grist Over a year ago

You might want to consider explaining what that does and why it would help them. Generally code on its own isn't very educational.

Jai Over a year ago

@AnthonyGrist Yes i was just out of my system when i posted it.

Collectives™ on Stack Overflow

jQuery event click in nested divs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related