best way to change the elemnt on which the event handler is applied .

best way to change the elemnt on which the event handler is applied .

hey guys check out the below code :: 

  1. var i = 1;

  2.             var funk = function() {
  3.                   return i < 5 ? ++i : i = 1 ;
  4.             }

  5.             changeHanderler = function(){
  6.                 str = funk();
  7.                 console.log(str);
  8.                 var elem = $('ul li:nth-child('+ i +')');
  9.             }

  10.             $('document').ready(function(){
  11.                 elem = $('ul li:nth-child('+ i +')');

  12.                 elem.on('click.ga' , function(){ // even after elem increaments in changeHandler() , elem will still be attached to the old elem :(( 
  13.                     changeHanderler();
  14.                     console.log('logged');
  15.                 });

  16.             });
see the event handler is attached to elem and onclick of elem the function changeHandler is called and inside changeHandler the value of elem is increamented . 

now wht i want to happen is i want the event handler to be attached to the new elem but the event handler is still attached to the old elem , even though the value of elem has actually changed . 

so my question is whats the best way to change the event handle to be attched to the new elem . 

So far i have this , FIDDLE HERE  .