jQuery,Input buttons work in markup, but not when prepended?

Question

I have to buttons, image input that work fine when in the markup like this,

<input type="image" class="play" src="images/play.png" />
<input type="image" class="pause" src="images/pause.png" />

But as soon as I try to prepend() it to a generated they still appear, but the click function does not work anymore.

$('.gallery-nav').prepend('<input type="image" class="play" src="images/play.png" /><input type="image" class="pause" src="images/pause.png" />');

Any idea why? Thank you.

Answer 1

Try using live instead of click.

live: attach a handler to the event for all elements which match the current selector, now or in the future.

$("input.play").live("click", function(){
    // write your code here
});

Answer 2

Try using the live() method for that:

// for play button
$('.play').live('click', function(){
  // your code
});

// for pause button
$('.pause').live('click', function(){
  // your code
});