JQuery .click() not working with template

Question

Here is my ajax function that has var template variable.

$.ajax({
type: "GET",
url: "/Home/GetComment",
dataType: "JSON",
success: 
    function (comments) {
        for (var i = 0; i < comments.length; i++)
        {

            var template = '<a id="like_button" class="like-comment" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>'
        }

    }
});


$("#like_button").click(function (evt) {
    $.ajax({
        type: "POST",
        url: "/Home/AddLikes",
        data: { "likeid": id },
        dataType: "JSON",
        success:
            function () {
                alert('alert');
            }
    });
});

This click function is does not work with this template, but if I take the same template and put it in my Index view, then the click function works.

This is the code in Index view where it has the same id as the one in the template:

<a id="like_button" class="like-comment" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>

Good old event delegation.

Patsy Issa
– Patsy Issa

2014-03-31 12:08:35 +00:00
Commented Mar 31, 2014 at 12:08 — Patsy Issa
– Patsy Issa, Commented Mar 31, 2014 at 12:08

Jai · Accepted Answer · 2014-03-31 12:15:14Z

1

delegate the event :

$(document).on('click', "#like_button", function (evt) {

and change your var id to class:

var template = '<a class="like-comment like_button" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>'

As your anchor is dynamically generated so this is not directly available in the document to bind the direct event to it, so to overcome this issue

you have to find out the closest static parent of this element which could be a div with some specific class assigned to it or $(document), $(document.body) which is always available to delegate the event.

edited Mar 31, 2014 at 12:15

answered Mar 31, 2014 at 12:09

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

Comments

Felix · Accepted Answer · 2014-03-31 12:07:33Z

0

I think, currently you've duplicated id, you should use class instead for your button:

var template = '<a class="like_button" class="like-comment" href="#">Like <span class="glyphicon glyphicon-thumbs-up"></span></a>'

Then you can use event delegation to attach events for dynamically loaded elements:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

$('body').on('click','.like_button',function() {
    // Your code here
});

answered Mar 31, 2014 at 12:07

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

elrado · Accepted Answer · 2014-03-31 12:08:05Z

0

When jQuery function that defines click on the method executes, button is not yet created! You have to add click method to element that is already there (body is always there).

So function below reads as: When you click on body, find like_button (if it is there) and click it (delegate event to it) :).

$("body").on("click", "#like_button", function (evt) {
    $.ajax({
        type: "POST",
        url: "/Home/AddLikes",
        data: { "likeid": id },
        dataType: "JSON",
        success:
            function () {
                alert('alert');
            }
    });
});

answered Mar 31, 2014 at 12:08

elrado

5,3321 gold badge19 silver badges15 bronze badges

Comments

A J · Accepted Answer · 2014-03-31 12:09:16Z

0

Try this

$("body").on("click", "#like_button", function (evt) {
    $.ajax({
        type: "POST",
        url: "/Home/AddLikes",
        data: { "likeid": id },
        dataType: "JSON",
        success:
            function () {
                alert('alert');
            }
    });
});

answered Mar 31, 2014 at 12:09

A J

2,14015 silver badges24 bronze badges

Comments

Jyoti Prakash · Accepted Answer · 2014-03-31 12:26:39Z

html code:

 <div id="cntr"></div>

js code:

$(document).ready(function(){
$.ajax({
   type: "GET",
   url: "/Home/GetComment",
   dataType: "JSON",
   success: function (comments) {
       var template = '';
       for (var i = 0; i < comments.length; i++) {

            template += '<a id="like_button" class="like-comment" href="#">Like     <span class="glyphicon glyphicon-thumbs-up"></span></a>'
        }

       $('#cntr').html(template);
       addEvent();
   }
  });

 function addEvent() {
    $("#like_button").on('click', function (evt) {
      $.ajax({
          type: "POST",
          url: "/Home/AddLikes",
          data: { "likeid": id },
          dataType: "JSON",
          success: function (d) {
              alert('Here');
          }
      });
   });
  }
});

Collectives™ on Stack Overflow

JQuery .click() not working with template

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related