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?

neoascetic
– neoascetic

2012-04-25 00:45:35 +00:00
Commented Apr 25, 2012 at 0:45 — neoascetic
– neoascetic, Commented Apr 25, 2012 at 0:45
Yes, i did search, but i didn't found the answer. Sorry.

imkost
– imkost

2012-09-03 21:11:38 +00:00
Commented Sep 3, 2012 at 21:11 — imkost
– imkost, Commented Sep 3, 2012 at 21:11

Andrew Whitaker · Accepted Answer · 2012-04-25 00:45:13Z

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, 2012 at 0:45

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

imkost Over a year ago

You are my saver. Thanks a lot

Tats_innit · Accepted Answer · 2012-04-25 00:48:12Z

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');
        });
    });

John Fisher · Accepted Answer · 2012-04-25 00:47:13Z

0

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

answered Apr 25, 2012 at 0:47

John Fisher

22.8k2 gold badges43 silver badges67 bronze badges

Collectives™ on Stack Overflow

jQuery create element and use it

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related