Question

I have the following sample HTML code: http://pastebin.com/Mya6tPc6
And here is the jQuery code I am trying to use:

$("#folder1").click(function(){
 alert($(this).attr('id'));
});

$("#f1").click(function(){
 alert($(this).attr('id'));
});

Here is the problem:
If the user clicks on the element ‘folder1’, it will display ‘folder1’ in the alert box. That is fine.
If the user clicks on ‘folder1.1’, it will display ‘folder1’ in the alert box, actually I don’t want it to do anything at this point.
If the user clicks on ‘f1’, it will display first an alert box with ‘f1’ and then another alert box with ‘folder1’. I need it to display only one alert box with ‘f1’.

Would someone please tell me how to do this? The structure is a directory tree, so it can have unlimited number of depth. I need to set it up in a way that when the user clicks on a folder LI, a function will display the contents of that folder in another area.

I know there are other file managers but I need to make one by myself in this case.

I have searched for ‘jQuery and nested UL’ and the sort in google, but till now I haven’t found a solution. Did I search for the wrong term?

Thank you very much for your answers.

Best regards,
Tony.

Answer 1

Not completely sure what you want still, but sounds like you’re having issues with event bubbling. Meaning that, if you click a nested element, the event will first fire on that element, then on it’s parent, until reaching the top-level element in your document. You could:

1) cancel the event after handling the click on the child (#f1);

$("#f1").click(function( e ){
    e.preventDefault();
    alert($(this).attr('id'));
    return false;
});

2) check if the target of the event is the element you’re handling the event for currently; see event object

$("#folder1").click(function( e ){
    if ( e.target == e.currentTarget ) {
        // do something
    }
});