jquery absolute position animation

I'm having trouble with a piece of code

$(function(){  
 $('input.no').click(function(){  
 $(this).animate({"left" : "80px"}, 150);  
 $(this).removeClass().addClass('click');   });  

 $('input.click').开发者_开发技巧click(function(){  
 $(this).animate({"right" : "0px"}, 150);  
  });  
});  

and here you can see the full code http://pastebin.me/a5b13717c5d7125cd904572c041ce3e1 not working :(

Without using live or delegate:

Add a class to the button like: slider-button

$(function() {
  $('.slider-button').bind('click', function() {
    if ($(this).hasClass('no')) {
       $(this).animate({"left" : "80px"}, 150);  
       $(this).removeClass('no').addClass('click');  
    } else {
       $(this).animate({"left" : "0px"}, 150);  
       $(this).removeClass('click').addClass('no');  
    }       
  });    
});

The reason the second click is not handled is that at the time you bind your handler, there are no input.click elements, so the handler isn't bound.

To make sure the handler is bound after you change the input's class, you need to use live:

$(function() {
  $('input.no').live('click', function() {
    $(this).animate({"left" : "80px"}, 150);  
    $(this).removeClass().addClass('click');  
  });

  $('input.click').live('click', function() {
    $(this).animate({"right" : "0px"}, 150);  
    $(this).removeClass().addClass('no');  
  });
});