Question

Say I have structure like:

<ul id="a">text
    <li id="b">text</li>
    <li id="c">text</li>
</ul>

How can I assign different event handlers (say, onclick listener) to a, b and c? When I assign a handler to <ul>, it will be triggered when any of the <li> is clicked.

Answer 1

instead of setting a single handler for each element inside your list it’s better to use a single event listener on the parent and, using event delegation, detect which is the id of the element the user clicked

$('ul').on('click', function(evt) {
   id = evt.target.id;
   switch (id) {
      "a" : ... break;
      "b" : ... break;
      "c" : ... break;
      default: ... ;
   }   

});