Jquerys .on('click') is only firing once then stops -

i have searched on here , google solution no avail, lots of similar posts people not using .on() or people missing end });'s etc

as in title using .on('click') , call function once stops, if use .click() works expected! have checked in console , tells me same.

i using jquery 1.9.1 jquery-ui 1.10.3 , testing in chrome. code below (i have omitted code function , shortened know not important);

html:

<section id="cat_list">     <ul>          <li><a href="?c=44834">cat 1</a></li>         <li><a href="?c=10908">cat 2</a></li>         <li><a href="?c=58202">cat 3</a></li>         <li><a href="?c=73689">cat 4</a></li>     </ul>         </section> 

jquery:

$('#cat_list ul').on('click', 'li a', function (e) {     e.preventdefault();     var href = this.href.split('?c=').pop();     $('.loading').center('fixed').show();     console.log(href[1]);     $.ajax({         url: script,         type: "post",         data: {             function: 'cat',             cat: href[1]         },         cache: false,         success: function (data) {             console.log(data);             /*place data on second page*/             $('#cat_list').hide(500, function () {                 $('#category_con').show(500);             });         }     });     return false; }); 

i have tried changing to:

$(document).on('click','#cat_list ul li a',function(e) {... 

with no luck!

description of function: can see gets category id of clicked link in ul fetches data , places onto next "screen" shows next "screen". there button clears said screen , hides shows category list again.

when category list unhidden no amount of clicking fire function!

any ideas how resolve?

i can't test code, if leave out ajax , use correct ids (you used capital l in js (cat_list), works fine, see here: http://jsfiddle.net/6zvbt/

<section id="cat_list">     <ul>         <li><a href="?c=44834">cat 1</a>          </li>         <li><a href="?c=10908">cat 2</a>          </li>         <li><a href="?c=58202">cat 3</a>          </li>         <li><a href="?c=73689">cat 4</a>          </li>     </ul> </section> <section id="next_page">next page</section> 

and js:

$('#cat_list ul').on('click', 'li a', function (e) {     e.preventdefault();     var href = this.href.split('?c=').pop();     console.log(href[1]);      $('#cat_list').hide(500, function () {         $('#next_page').show(500);     });     return false; }); $(document).on('click', '#next_page', function (e) {     e.preventdefault();     $('#next_page').hide(500, function () {         $('#cat_list').show(500);     });     return false; });