jquery click doesn't work on ajax generated content

Question

I am using $(".button").on("click", function(){ });

to click to a button which is on a container but then an ajax call is done and the content gets updated with new stuff and then when i try to click .button it wont work... nothing will get returned when i click the button.

I even tried

$(".button").live("click", function(){ });

or

$(".button").click(function(){ });

How can I make it work?

EDIT : my html:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>

Answer 1

Should be done this way.

$('body').on('click', '.button', function (){
        alert('click!');
    });

If you have a container that doesn't change during the ajax request, this is more performant:

$('.container').on('click', '.button', function (){
        alert('click!');
    });

Always bind the delegate event to the closest static element that will contain the dynamic elements.