Find id of an LI element in a nested UL LI structure using jQuery

Question

Hi,

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
    }
});

Answer 2

(The comment box doesn't allow me to post this message, so I am using the answer box. I hope this is not a problem.)

Hello Paul,

Thank you for your comments. The following worked well:

var i=0;

$("#folder1").click(function( e ){
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>");
    return false;
});

$("#folder1_1").click(function( e ){
    var me = e.currentTarget;
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>");
    return false;
});

$("#f1").click(function( e ){
    $("#files").append(++i + ". " + $(this).attr('id')+"<br>");
    return false;
});

The i is only for testing purpose.

The e.preventDefault(); didn't work well with the jQuery Treeview plugin. So I had to remove it. Seems like the return false; does the job.

This:

if ( e.target == e.currentTarget ) ... May I know if you get a true from this comparison in any case?

I can get it to work with the following:

    if(e.currentTarget === this)
    {
        alert("Its me!");
    }

I am not sure if this will work on all browers, on Safari and Chrome this looks ok.

Thanks a lot for the ideas and information on things like event bubbling too.

Best regards, Tony.

Hello Yi Jiang,

Thank you, you are right. I will do that from now on.

Best regards, Tony.