javascript - Is there a better way to nest two jquery selections? -

    $("ul").on("click", "li", function () {         $(this).toggleclass("completed");     });      $('ul').on('click', "li span", function (event) {         event.stoppropagation();         $(this).parent().fadeout(500, function () {             $(this).remove();         });     }); 

situation - there new li items span items added using form , want them able have behavior other li items have.

is there better way this? multiple declarations specifiers seem redundant.

this first time using jquery, not aware how go around redundancy.

thank you.

give class name elements , use same logic selecting class.

<li class="class-name">text<span class="class-name"></span></li>  $('ul').on('click', '.class-name', function(e) {  e.stoppropagation();   if(e.target.nodename == 'span') {   // code span  } else if(e.target.nodename == 'li') {   // code li  } })