How to make .append() html content clickable?

Question

I need to make certain "appended" html content "clickable". Here is the code:

function displayContacts(contactArray){
        var jsonObject = $.parseJSON(contactArray);
        jsonObject.forEach(function (dat) {
            //Begin Contact Unit
            $('.feed')
                .append('<div class="feed-img"><img src="'+dat.avatarUrl+'">\
                </div><div class="feed-text"><p><span class="name_highlight">\
                ' + dat.firstName + ' ' + dat.lastName + '</span></p></div>');
            //End Contact Unit
        });
}

I have a AJAX call not shown that gets 3 pieces of data in JSON. This function then appends that data to an html doc in order to create a list of contacts - in this case it's a master list of every user in the db. My question is: how would I go about making these elements (the images, for example) clickable? The goal is to make this list of contacts in such a way that the user can select one by clicking on the avatar. I have tried using .on, .click, many different things and I think it may require one of those but I am not sure where to place it in the actual code. The way I understand it is these elements are dynamically created, which makes them special. Thank you for any help - this has really confused me.

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js — bzd91, Jun 21 '16 at 04:48
Did you try $('.feed-img').on('click', function() {YOUR CODE}); — Charan Kumar, Jun 21 '16 at 04:49
_My question is: how would I go about making these elements (the images, for example) clickable?_, `$('.feed').on('click', '.feed-img', function(){ })` — Satpal, Jun 21 '16 at 04:51
$(document).on('click', '.feed-img', function(){ /* Write code here for on click on image*/ }); Would you please try this ? — Maulik Kanani, Jun 21 '16 at 04:58

score 0 · Answer 1 · answered Jun 21 '16 at 04:49

0

$(document).on('click', '.feed', function(){

$('.feed').append($('<input type="hidden" name="data" />').val(token));
}

answered Jun 21 '16 at 04:49

KARTHI SRV

499
4
20

score 0 · Answer 2 · answered Jun 21 '16 at 04:50

You can do this a couple of ways:

.append('<div onclick="whatever();">'); //Clickable div

Or:

t=$('<div>');
t.click(function(){ alert('clicked'); });
.append(t); //Clickable div

Or:

.append('<div class="clickme">');
$('.clickme').click(function(){ alert('clicked'); });

Any number of ways can do it. I personally recommend the second method as it's the cleanest solution.

How to make .append() html content clickable?

2 Answers2