javascript - Dynamic binding of event handlers -

i have event handler

$(document).on("click","li.folder",function(e){     alert(e.target); }); 

where folder custom class.

the folders appended ul dynamically.

the problem event handler fires every time wherever click in entire document elements tags other li , class other folder.

i thought li.folder in second argument filters out events?

html

<ul id="filelist" data-role="listview"></ul>    <li class="node folder ui-li-1line-bigicon1" id="row%id%" label="%name%" uri="%uri|escapeencies%" fulluri="%fulluri|escapeencies%">      <form class="my-ui-checkbox hidden"><input type="checkbox" /></form>      <img src="images/folder.png" class="ui-li-bigicon" />      <span class="ui-li-text-main nodename">%name|escape%</span>  </li>

i pushing li element ui (the real code quite big ).

i know maybe can use ui#filelist selector want know why problem arises in case?

edit:

@george fiddle work fine, think problem have hidden buttons on document, ones firing this, not belong folder class