Javascript function after html appended

Question

I have a problem with my javascript function :

$(".like-btn").click(function () { .. }

this function is not triggered anymore after in my javascript somewhere else I do stuff like

 $("#1021").append("'<button type="submit" class="btn btn-default like-btn" ... .etc ");

So basically I need my jquery to be triggered also after I add some more html on my page.

See: Understanding Event Delegation

Stryner
– Stryner

2015-09-09 15:10:13 +00:00
Commented Sep 9, 2015 at 15:10 — Stryner
– Stryner, Commented Sep 9, 2015 at 15:10

palaѕн · Accepted Answer · 2015-09-09 15:09:33Z

4

Since the like-btn class is added dynamically, you need to use event delegation to register the event handler like this:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#1021').on('click', '.like-btn', function(event) {
    event.preventDefault();
    alert('testlink'); 
});

answered Sep 9, 2015 at 15:09

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

3 Comments

user2391356 Over a year ago

The 1021 was just an example, the id changes :)

KrakenDev Over a year ago

If the ID is changing that you provided for the example, you need to traverse up the DOM to the first static element available and use that as your selector. The above answer is correct, but you need to get the first parent element that isn't dynamic then.

palaѕн Over a year ago

Then you can use document instead. But, it would be better to use a parent static container. That would attach your event to any like-btn within the container element, reducing the scope of having to check the whole document element tree and increasing efficiency.

Collectives™ on Stack Overflow

Javascript function after html appended

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related