Adding click handler to a dynamically generated content. How?

Question

My Json format is as follows:

[{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"}]

I also have a jquery script in which I'm adding dinamically hyperlinks:

$.ajax({
  url: './download.php', 
  type: "POST",
  data: {
    id: id
  },
  dataType:'text',
  success: function(ans)
  {
    var data = JSON.parse(ans);

    $.each(data, function(i, v) {
        $('links').append('<li><a><div>' + v.Text + '<span class="small">' + v.DateTime+ '</span></div></a></li>');

    });     

    }});

I want a simple effect - a list of hyperlinks on my webpage. When user cliks any hyperlink, he will see an alert window with the value of the field id, Color, DateTime and Text.

I tried adding a function inside $.each:

$.find('a').click(function(){
    alert(v.Color+v.id+v.Date+v.Text);
})

But it tells me:

Uncaught TypeError: $.find(...).click is not a function

So how can I append a function (click handler) to each generated link that will be displaying all properties related to the clicked link?

Are you sure you `jQuery` code is working? `links` tag does not exist. You probably want to retrieve an id here (i.e. `$('#links')` instead). I don't think you are actually inserting any link in your page. That maybe the reason why you can't append a `click` handler. — Quentin Roy, Oct 21 '15 at 16:19

Anderson Pimentel · Answer 1 · 2015-10-21T16:36:36.213

1

Try on:

$('#links').on('click', 'a', function() {
    alert('message');
});

edited Oct 21 '15 at 16:36

answered Oct 21 '15 at 16:19

Anderson Pimentel

5,086
2
32
54

4

From the linked docs page: As of jQuery 1.7, `.delegate()` has been superseded by the `.on()` method. – Andy Oct 21 '15 at 16:28
True, @Andy. I'm always confused about which is the new one: delegate/on, fail/error, and success/done. =) Updated the answer. Thanks! – Anderson Pimentel Oct 21 '15 at 16:36

Quentin Roy · Accepted Answer · 2015-10-21T21:04:18.303

There is two problems here:

$.find('a') is not going to work. You need to select a dom element first on which you will apply the selector (e.g. $(document).find('a')).
You are appending the lis to an element selected using $('links'). This is not going to work either. This syntaxe selects tag. There is no HTML tags <links>. I guess what you are actually trying to do is to select the dom element with the id "links". To do so you need to do $('#links').

Here is a working snippet.

var data = [
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"}
];


$.each(data, function(i, v) {
  // Create the li.
  var li = $('<li><a href="#"><div>' + v.Text + '<span class="small">' + v.DateTime + '</span></div></a></li>');

  // Append it to the dom element with the id "links".
  $('#links').append(li);

  // Attach the click handler to its <a> child.
  var a = li.find('a').on('click', function(e){
    e.preventDefault();
    alert(v.Color + " " + v.id + " " + v.DateTime + " " + v.Text);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links"></div>

Thanks, works like a charm! But is there a way of making tag more like... a hyperlink look, with a specific coursor pointer when user highlights it for example? — user3766930, Oct 21 '15 at 19:22
You need to add an href. Preferably the anchor tag: `href="#"`. See my edit. — Quentin Roy, Oct 21 '15 at 20:44
Or you can also just rewrite the css. See here for more info on this issue (don't follow the first answer, I know it has many votes but it is a bad one): http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — Quentin Roy, Oct 21 '15 at 20:46

score 0 · Answer 3 · answered Oct 21 '15 at 16:28

There's a couple of ways of doing this.

One is to add a click handler on each <li> that you add...

var $li = $('<li><a><div>' + v.Text + '<span class="small">' + v.DateTime+ '</span></div></a></li>');
$('#links').append($li);
$li.click(function(){
    alert(v.Color+v.id+v.DateTime+v.Text);
});

http://jsfiddle.net/daveSalomon/t38x715g/

Another is to bind the handler to your links element, and use on with a selector. You'll need to keep track of the data you want to show though - you could use $.data for that.

$('#links').on('click','a',function(){
    var $li = $(this).parents('li');                
    alert($li.data('Color')+''+$li.data('id')+''+$li.data('DateTime')+''+$li.data('Text'));
});

http://jsfiddle.net/daveSalomon/t38x715g/2/

Adding click handler to a dynamically generated content. How?

3 Answers3