jquery nested li click event calls multiple times

Question

I have the following structure. ```

Folder 1
- Item 1.1
Folder 2
- Subfolder 2.1
  - File 2.1.1
  - File 2.1.2
- File 2.2
Folder 3 (closed at start)
- File 3.1
File 4

``` In js I have the following function. ``` $("#browser li").click(function(){ }); ``` When I clicked on li File 2.1.1. The function calls 3 times first time for li File 2.1.1 , second time for li Subfolder 2.1 and third time for li Folder 2. Can anyone give me the solution to call the function exactly once? Your Help is greatly Appriciated. Thanks.

Accepted Answer

That is because you have many `li` elements under `#broswer`.

Try this instead:

```
$("#browser>li").click(function(){
    //only direct children of #browser
    //your code
});
```

Or you can use `event.stopPropagation()`:

```
$("#browser li").click(function(event){
    event.stopPropagation();
    //your code
});
```

jquery nested li click event calls multiple times

Solution

Problem