Ajax JQuery: On click for dynamically created elements not working

Question

Have an Ajax request that creates all the elements within a static class.

However, I cannot get the below JQuery to pickup the button/s that are created i.e. cannot fire a test alert message.

I have reviewed a number of posts on this site as regard on click events but I can't get my code to work still.

JQuery and html elements shown below.

JQuery On Click code:

$(".content").on("click",".like",function()

Html (multiple class "post" are created just a single example shown below):

<div class="content"> //Static

  <div class="post">

    <div class="post-text">Some text goes here</div>

      <div class="post-action">

         <input type="button" value="Like" id="like_1_m5s9hr9vfef3ne6ubb533kqhr1" class="like">

         <span id="likes_1_m5s9hr9vfef3ne6ubb533kqhr1">12</span> //id correctly starts with likes not Like

       </div>

    </div>

</div>

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — peeebeee, Jan 14 '20 at 22:09
try with $(document).on() and use your selectors. In this case you have a reference to the DOM — fefe, Jan 14 '20 at 22:12
$(document).on("click", ".like" , function() {//your code }); — Evik Ghazarian, Jan 14 '20 at 22:13
@peeebeee thank you. I think I have already reviewed that question post. Thank you though. — CGarden, Jan 14 '20 at 22:17
@fefe thank you. Why would this be needed in some cases and not others? — CGarden, Jan 14 '20 at 22:55

score 1 · Answer 1 · answered Jan 14 '20 at 23:58

Why not use javascript here instead of jQuery?

<input type="button" value="Like" id="like_1_m5s9hr9vfef3ne6ubb533kqhr1" class="like" onclick="youfunctionname('like_1_m5s9hr9vfef3ne6ubb533kqhr1');">

While generating dynamic content, it would be easier for you to write onclick directly before appending the element in html. Also, you can modify the calling of the function in your onclick(For eg.: Pass id, or any other useful data related to do other stuff).

Thank you for the suggestion. The answer above though from has done the trick. — CGarden, Jan 15 '20 at 20:59

score 1 · Accepted Answer · answered Jan 15 '20 at 05:29

1

you just need to use $(this) so you can determine which .like class you have clicked. example below

$(".content").on("click",".like",function(){
    var id = $(this).attr("id"); // get value of id
    alert(id); // alert value
    $(this).css("color","red"); // change color
});

answered Jan 15 '20 at 05:29

Nyuu

91
1
5

That's fantastic and has done the trick. Thank you so much and to everyone that has helped. I really appreciate it. – CGarden Jan 15 '20 at 20:57

Ajax JQuery: On click for dynamically created elements not working

2 Answers2