We Keep Coding

Click event doesn't fire when parsing external html

I have a project where I need to load html from an external file and add it to an existing div element.
It works great, except that the .click() events never fire when clicking on the desired icon in the generated html.
Code that loads the html:
$.each(data, function (index, review) {
let html = $.parseHTML($.trim(review));
$(html).appendTo($items);
});
Root element of the loaded html is a class named "lc-rating-wrap".
The js that doesn't fire on click:
$(".lc-rating-wrap > .vote-wrap > .do-vote-wrap > .icon").click(function () {
//doStuff
});
I guess it has something to do with that the elements isnt there when I load the js file?
Am I using parseHTML() correctly?

Your content is dynamic, but your event is binded only for existing elements. Change it to be $(static).on(event, dynamic, callback):
$(document).on('click', ".lc-rating-wrap > .vote-wrap > .do-vote-wrap > .icon", function () {
//doStuff
});

Please use delegate instead click.
$( "#parent" ).delegate( ".icon", "click", function() {
//dostuff
});
Parent is a element which you using to generate your elements (inside).
So it cannot be generated dynamicaly.

use jquery click event delegation. see https://learn.jquery.com/events/event-delegation/
Bind event to an parent element already found in your page when js is binding click event. Use .on("click", "your selector", function(){})

click event not working jQuery

I am trying to handle the click event using jQuery
on upload success, I am creating the following using jQuery:
$("#uploadedImage").append( "<div class='img-wrap'>
<span class='deletePhoto'>×</span>
<img data-id='"+files[i]+"' src='"+asset_url+"uploads/ad_photo/"+files[i]+"'>
</div>
<span class='gap'></span>");
and for handling click event for the above created div's I have written this:
$('.img-wrap .deletePhoto').click(function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
the above code is working properly and creates all div, but when I click on the deletePhoto span. no jQuery alert is showing.
Any help or suggestion would be a great help.
Thanks in advance

delegate the event and change as suggested:
$("#uploadedImage").on('click', '.deletePhoto', function() {
You have to delegate your event to the closest static parent #uploadedImage in your case which is available on the page load like the container which holds the newly appended div and image.
although $(document) and $(document.body) are always available to delegate the event.

It is better to use on() when you create new element after DOM has been loaded.
$(document).on('click', '.img-wrap .deletePhoto', function() {
});

You are creating your element dynamically that is why you would need .live()
but this method is deprecated in newer version.
if you want to use jquery 1.10 or above you need to call your actions in this way:
$(document).on('click','element',function(){
`your code goes in here`
})

try this:
$(".img-wrap .deletePhoto").on('click', function() {
});

You can change a little in your code.
$(".deletePhoto").off("click").on("click",function(){
//Your Code here
});

First check in debugging mode that you get length when your code is going to bind click event and another thing bind event must written after that element is appended.
And Also check css of your element (height and width) on which you are clicking and yes
$(document).on('click','Your Element',function(){
//your code goes in here
});
Will works fine

use delegate:
$('#uploadedImage').on('click','.img-wrap .deletePhoto',function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
see details delegate and .on here

jQuery 1.7+ on(click..) doesn't work on <li> added dynamically

I have a dialog with a
<ul id="suggestions0">
<li id="suggestion0-0" class="suggestion">BLO</li>
<li id="suggestion0-1" class="suggestion">BLU</li>
<li id="suggestion0-2" class="suggestion">BLL</li>
<li id="suggestion0-3" class="suggestion">BOO</li>
<li id="suggestion0-4" class="suggestion">CLA</li>
</ul>
that I want to replace the content dynamically.
I change to ul content with this
$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");
What I want is when I click on one of these word, I want to do something, suppose an alert.
I try to do this
$(".suggestion").on("click", function() {
alert(this.id);
});
but the alert never appear.
here a sample that show the problem
http://jsfiddle.net/survivant/cyFxp/1/
in the sample, if you click on OK, it doesn't change to content, so if you click on a LI, it will works, but if you click on NOTOK, the events won't be received.
I'm using jQuery 1.7+, the live api is deprecated, or removed, it the APi suggest to use on().

You are not using on correctly. live is used to bind event handlers to the document to listen for events that bubble up from a specific selector, but by calling on explicitly on .suggestion, you will only attach the listeners to existing suggestions. So you need to use on to bind on an element that will always exist, and pass a selector to pick out the elements that get created dynamically.
// With live like this:
$('.suggestion').live('click', ...
// Is equivalent to this:
$(document).on('click', '.suggestion', ...
// Not this:
$('.suggestion').on('click', ...
In your case, rather than basing on off document, you can use your ul.
$("#suggestions0").on('click', '.suggestion', function(){
alert(this.id);
});

I found a solution, not sure that is the best one, but seems to work.
$("#suggestions").on("click","li", function() {
alert(this.id);
});

The script below only bind click event to DOMs current exist in the page.
$(".suggestion").on("click", function() {
alert(this.id);
});
To bind click event to all DOMs that are and will be created in the page. Bind the event to the document instead.
$(document).on("click", ".suggestion", function() {
alert(this.id);
});
See fiddler for codes.

Pass a selector to on() and it works like the old live():
$("#suggestions0").on("click", ".suggestion", function () { alert(this.id); });
See updated fiddle: http://jsfiddle.net/cyFxp/2/

suggestions is not a class but an id thus
it should not be
$(".suggestion").on("click", function() {
alert(this.id);
});
But like this
$("#suggestion").on("click", function() {
alert(this.id);
});
That is, instead of a dot you prefix it with a pound sign #.

Click event of 'a' tag in jquery

I need to trigger click events of "a" tags which are in "deletable" class. I saw some similar question in SO, but following code doesn't work for me. What i'm trying to do is to delete relevant <li> from <ul>.
$(document).ready(function () {
$('.deletable').live("click", function () {
alert("test"); // Debug
// Code to remove this <li> from <ul>
});
});
<form ...>
<ul>
<li>OneDelete</li>
<li>TwoDelete</li>
<li>ThreeDelete</li>
</ul>
</form>
I assume i'm using incorrect object hierarchy inside $('...') tag. But i don't have enough js/jquery/DOM knowladge to solve this problem. please help.
EDIT
Thanks for the answers, but none of them works for me. Actually i'm adding <li>s dynamically. There maybe a problem. Please check,
#sps - a listbox
#add - a button
#splist - another listbox
#remove - a button
$(document).ready(function() {
$('#add').click(function(e) {
var selectedOpts = $('#sps option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#splist').append($(selectedOpts).clone());
$('ul').append('<li>' + selectedOpts.text() + 'Remove' + '</li>');
e.preventDefault();
});
$('#remove').click(function(e) {
var selectedOpts = $('#splist option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$(selectedOpts).remove();
e.preventDefault();
});
});

The .live() method of jQuery has been deprecated. You can get similar functionality using $('body') and delegating to .deletable like I did in the following code:
$('body').on('click', '.deletable', function(e){
e.preventDefault();
// this is the li that was clicked
$(this).parent().remove();
});
The preventDefault method is used to keep the link from loading a new page should there be something targeted in the href attribute. If you keep the same HTML structure as you have in your example, then you can simply take the anchor element (this) and grab the parent, then remove it from the DOM.
It would be wise to, instead of using $('body'), target the container for the .deletable anchors, which, in this case, would be $('ul'). The function would look like this:
$('ul').on('click', '.deletable', function(e){
e.preventDefault();
// this is the li that was clicked
$(this).parent().remove();
});
Using $('body') means that every event on the page would have to be filtered to see if it originated from a .deletable anchor. By scoping it to the ul preceding your li's, you limit the number of times your function is called increasing performance.

Some things first: if you're using jQuery 1.9, the .live() function is not anymore supported. Versions prior, that particular function is deprecated anyway, so you shouldn't really use it.
That being said, your syntax looks about correct. So I'm assuming that it's your hierarchy inside the handler function that's incorrect.
Something like this should work if you're trying to delete the parent <li>:
$('.deletable').on('click', function (e) {
// since you're working with a link, it may be doing wonky default browser stuff
// so disable that for now
e.preventDefault();
// then we delete the parent li here:
$(this).parent('li').remove();
});
If you really want to make that into a delegate signature, something like this should work:
$('form').on('click', '.deletable', function (e) {
// same banana
});

you can use $('a.deletable') selector ... this finds the <a> with class deletable.
u can go through the on delegate events too.. here is the docs
try this
$('a.deletable').on("click",function(){
alert("test"); // Debug
// Code to remove this <li> from <ul>
$(this).parent("li").remove();
});
if in case your <li> is added dynamically..
$(document).on("click",'a.deletable',function(){ .... //even more better if u replace the document with closest elements to a.deletable ..like $(form)
live() is depricated..

$('a.deletable').live("click",function(){
alert("test"); // Debug
$(this).parent('li').remove();
});

Dynamically added javascript is not working, but static code works fine?

Here is what I'm doing... I have a textbox that users type something in and click an add icon. This fires some jquery code that adds the item they typed into a span within a "content" div. The generated code has a delete icon that appears on hover and when clicked it should make the span disappear. This works if the code is on the page already (before document load) but if it's dynamically created, it breaks the delete on click functionality.
Here is a JSfiddle so you can see it in action: http://jsfiddle.net/WF32y/
What can I do to fix this? I essentially want to do what happens on here (stackoverflow.com) when you enter tags to a new question.

Use event delegation for dynamically added elements by changing this:
$('a.delete').on('click', function(e) {
Into this:
$(document).on('click', 'a.delete', function(e) {
Fiddle
.on() Direct and delegated events reference
Also, concerning performance, you can attach the handler to a closer ancestor of the dynamically added elements than the document (e.g. a static wrapper element).

You can easily do it with delegate. In your case:
$('#container').delegate('a.delete','click', function(e) {
e.preventDefault();
taskID = $(this).closest('.task')[0].id;
$(this).closest('.task').fadeTo(300, 0, function() {
$(this).animate({
width: 0
}, 200, function() {
$(this).remove();
});
});
});
And by the way FYI:
// jQuery version 1.4.3+
$('#container').delegate('a.delete'...
// jQuery 1.7+
$('#container').on('click', 'a.delete', function(e) {
it is faster and more propery way than:
$(document).on('a.delete'...
or:
$('body').delegate('a.delete'...
or:
$(document).delegate('a.delete'...