Question

For example, I have something like:

<div id="buttons">
    <button class="button">Click</button>
</div>

<script>
    $(document).ready(function() {
        $('.button').click(function() {
            $('#buttons').append('<button class="button">Click</button>');
        });
    });
</script>

When I press “Click” button, the script will create a new button with the same class “button”.
When I press this new button — nothing happens.

I understand why, but I don’t know how to avoid this.
I want my script “see” just created button.

Answer 1

Use on to bind to delegated events

$("#buttons").on("click", ".button", function () {
   $('#buttons').append('<button class="button">Click</button>');    
});

Example: http://jsfiddle.net/66H8W/