jQuery create element and use it

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.

Did you [search first](http://stackoverflow.com/questions/10084293/how-to-make-live-click-event-on-new-added-dom/10084329#10084329)? — neoascetic, Apr 25 '12 at 00:45

score 2 · Accepted Answer · answered Apr 25 '12 at 00:45

2

Use on to bind to delegated events

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

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

answered Apr 25 '12 at 00:45

Andrew Whitaker

124,656
32
289
307

You are my saver. Thanks a lot – imkost Apr 25 '12 at 00:51

score 1 · Answer 2 · answered Apr 25 '12 at 00:48

Hiya demo : http://jsfiddle.net/vcrF3/ **or http://jsfiddle.net/vcrF3/1/

http://api.jquery.com/on/ quote

events-mapA map in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

Jquery code

   $.fn.ready(function() {
       $('div').on("click", ".button",  function() {
           $('#buttons').append('<button class="button">Click</button>');
          // alert('append button is clicked');
        });
    });

score 0 · Answer 3 · answered Apr 25 '12 at 00:47

0

Read http://api.jquery.com/on/, paying particular attention to the "direct and delegated events" section.

answered Apr 25 '12 at 00:47

John Fisher

22,355
2
39
64

jQuery create element and use it

3 Answers3