Javascript, Jquery ,DOM

Question

After appending a button on Html document the jQuery event associated with it not working ?

For example:

$("#mydiv").append('<a href="#" id="mybutton">X</a>');//this is button appending

$("#mybutton").click(function(){
    alert("hello");
});

you gotta wait a ms or 2, or use $("#mydiv").on("click","#mybutton", ... ) — dandavis
– dandavis, Commented Sep 9, 2014 at 21:28
Is this your actual code (i.e. do these lines run sequentially)? In that case, do you have more than one element matching #mybutton in your document? — Frédéric Hamidi
– Frédéric Hamidi, Commented Sep 9, 2014 at 21:30
It works. If it doesn't, it's probably a duplicate of stackoverflow.com/q/12829963/218196 — Felix Kling
– Felix Kling, Commented Sep 9, 2014 at 21:36

DarkAjax · Accepted Answer · 2014-09-09 21:30:07Z

3

Assuming you call the .click() method on #mybutton before it is actually appended to #mydiv, you need to use .on() as the button doesn't exist when you attach the event handler:

$('#mydiv').on('click','#mybutton',function(){
    alert('hello');
});

Should work...

answered Sep 9, 2014 at 21:30

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

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

3 Comments

Barmar Over a year ago

If the code is as he posted, he adds the element before attaching the handler, so he doesn't need to do this.

DarkAjax Over a year ago

@Barmar Indeed, I assumed that wasn't the case, as otherwise the original code would work...

Felix Kling Over a year ago

Either way, if that's the reason then the question should be closed as duplicate of e.g. stackoverflow.com/q/12829963/218196. We really don't need more of these.

LcSalazar · Accepted Answer · 2014-09-09 21:50:00Z

0

Why don't you set the click inside the append?

This way you wouldn't need to concern about the element being added or not to the document's flow, since you'd be setting the event callback on the actual DOM element variable:

$("#mydiv").append(
    $('<a href="#" id="mybutton">X</a>').click(function() {
        alert("hello");
    })
);

answered Sep 9, 2014 at 21:50

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Collectives™ on Stack Overflow

Javascript, Jquery ,DOM

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related