Trigger events that are loaded via AJAX

Question

The issue: when retrieving data from an Ajax request that contains components to be used in jQuery calls. The jQuery isn't working.

Solution: as answered by Bikash Waiba the reason this happens is because the jQuery functionality needs to know the page has loaded.

You are using an ID, make sure that the ID doesn't repeat on the same page. Try to use class in your event if that is your case. — Prateek
– Prateek, Commented Jun 6, 2017 at 19:17
good point! It's part of a while loop so i am churning out a lot of results all containing the same id. I can advise that i was originally using the class as a selector and the issue is still the same. — Colin Barstow
– Colin Barstow, Commented Jun 6, 2017 at 19:20
You did using function, that's good. But should work with dom event binding as well. jsfiddle.net/azmgdqc4 — Prateek
– Prateek, Commented Jun 6, 2017 at 19:29
Thanks, it works good in your jsfiddle but for some reason I just couldn't get standard event binding to work in my scenario. I'm going to try cleaning it up and trying this way again. — Colin Barstow
– Colin Barstow, Commented Jun 6, 2017 at 19:35

Bikash Waiba · Accepted Answer · 2017-06-06 19:30:55Z

Echoing html from a php function is absolutely ok the problem arises if you echo the block dynamically after page load via ajax in such case you can do something like this

$(document).on("click",'#likeClick',function(e){ var id = $('#likeClick').data('value'); $.ajax({ url: '../resources/handlers/like.php', type: 'POST', data: {id: id}, cache:false, success: function(data) { $('#likeNumber').html(data); } }); });

that is exactly what i am doing, the code being echoed is via ajax. This is really interesting to know and i thank you for your answer!

jkeys · Accepted Answer · 2017-06-06 19:23:06Z

You could make it into a function, and have use the onclick="" attribute to call the function.

<script> function request(id) { $.ajax({ url: '../resources/handlers/like.php', type: 'POST', data: {id: id}, cache:false, success: function(data) { $('#likeNumber').html(data); } }); } </script> <div class='community-post-like-button' id='likeClick' data-value='test' onclick="request(this.id);">Like Me</div>

You can directly pass the id to function you dont need var id = $('#likeClick').data('value');
works perfectly as a function, thank you for explaining this way works!

Vladimir Salguero · Accepted Answer · 2017-06-06 19:34:27Z

If you have several lines you must use a class attribute instead of an id attribute for the case of #likeClick, use the class .community-post-like-button ids should not be repeated in a same HTML document. Your code would look like this then.

HTML

<div class='community-post-like-button' id='likeClick' data-value='{$id}'>Like Me</div>

JavaScript

 $(document).ready(function() { $('.community-post-like-button').click(function(){ var id = $(this).data('value'); $.ajax({ url: '../resources/handlers/like.php', type: 'POST', data: {id: id}, cache:false, success: function(data) { $('#likeNumber').html(data); } }); }); });

Collectives™ on Stack Overflow

Trigger events that are loaded via AJAX

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related