Question

In my project, I need to create a html5 CMS, my problem is how to target a element in overlapping elements? like

<div id='L1'>
  <!--some text -->
  <div id='L2'>
    <!--some text -->
    <div id='L3'>
         <!--some text -->
    </div>
    <div id='L4'>
         <!--some text -->
    </div>
  </div>
</div>

I would like to target L1,L2,L3 and L4. Now the problem comes to I can use $(L1, L1 *) to target each element in L1, include L1 and bind ‘click’ event handler for them.

However when I click, let’s say L4, then not only contents of L4 comes out but also L1 and L2. I want to see contains of just that element, do not need is’s parent, what should I do?

Update:
I load a temple container via ajax, and bind event handlers for them

$('#load_area').load(file,function(){
$('#load_area *').click(
    function(){
        $('#edit_area').append($(this).html());//display what I have clicked
    }
);
});

Answer 1

the reason your code is behaving this way is your event is bubbling up the DOM, to prevent this behavior you can do one of the following

$('#load_area').load(file,function(){
$('#load_area *').click(
    function(event){
        event.stopPropagation();
        $('#edit_area').append($(this).html());//display what I have clicked
    }
);
});

or

$('#load_area').load(file,function(){
$('#load_area *').click(
    function(){
        $('#edit_area').append($(this).html());//display what I have clicked
        return false; //event.stopPrpagation() + event.preventDefault()
    }
);
});