Onclick for dynamically created elements using jquery

Question

Onclick event is just not working for me. When mouse in over some div, I dynamically insert some icons using .html() function, and want to set onclick on that icons but i can't. I also tried setting click listener for the static enclosing div (jquery .on('click', ..) function) or for the whole page but it's no use, as if those icons just swallow the click event... Any ideas?

<div id="rating" class="pull-right rating-box clearfix">
    <i class="fa fa-star"></i>
    <i class="fa fa-star-o"></i>
    <i class="fa fa-star-o"></i>
</div>

Here is html

I have tried a lot of way of doing, but here is the latest thing i tried

$(document).ready(function() 
{
    //some code
    $('#rating').html(/* some combination of <i class="fa fa-star"></i>'s */);
    $('#rating').on('click', 'i', function() { });
});

Maybe duplicate of [jQuery - Click event doesn't work on dynamically generated elements](http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements) — Volune, Aug 22 '14 at 12:07
Possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) and many, many other questions posted here already. Do a bit of search, please. — emerson.marini, Aug 22 '14 at 12:13
Thank you all for marking my question as duplicate, but I have gone through all the similar questions and none of the proposed solutions worked for me. — user3751451, Aug 22 '14 at 12:16

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Use the .append() method instead:

$('#rating').empty();
$('#rating').append(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });

jsFiddle

See jquery .html() vs .append() for more information.

edited May 23 '17 at 12:13

Community

1
1

answered Aug 22 '14 at 12:28

Kristoffer Jälén

4,112
3
30
54

But i need to clear the html of the div before calling append. What is the correct way of doing that? – user3751451 Aug 22 '14 at 12:35
My fiddle works. There is a star icon at the right, and when clicked an alert is displayed. – Kristoffer Jälén Aug 22 '14 at 12:45

Onclick for dynamically created elements using jquery

1 Answers1