JavaScript Click not working after clearing and appending the html click not working after append,click not working after ajax,

click not working after i clear and append the html inside a div using jquery. Here is the html code

<div id="divMain">
</div>
<input id="btn" type="button" value="Clear&Add"/>

Here is the jQuery code

var a = $('<a/>').attr({'id':'aH','href':'#'}).text('Hello');
a.click(function(){
    alert('hello');
});
$('#divMain').append(a);



$('#btn').click(function(){
   var newA = $('#aH');
    $('#divMain').html('');
    $('#divMain').append(newA);
});

Here is jsfiddle

Simple click on the alert link in fiddle , it shows an alert.Now click on the Clear&Add button .And now click on alert.It doesn't work.

Answer:1

You need event delegation to bind the event with dynamically added elements. You also need to create elemet with id aH as you have removed the element from DOM without preserving it.

Live Demo

$(document).on('click', '#aH', function(){
    alert('hello');
});

You can try adding the globally created a and you would not need to bind click again.

$('#divMain').append(a);

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery api

Answer:2

You need to use event delegation:

$('#divMain').on('click', a, function(){
    alert('hello');
});

Updated Fiddle: http://jsfiddle.net/W95wV/1/

Answer:3

Angular $broadcast called inside ng-repeat fires multiple times

I have nested forms in an ng-repeat with a button whose click event calls a function that does a couple of things including a $scope.$broadcast. Everything in the function triggers once except for the ...

angular broadcast called twice

kendo ui resize column

I am using the following function(which i got from web) to resize the column in kendo ui. this is based on Index, i am looking out to see if there can be an option to select by column title or field/...

kendo resize columns
kendo column resize event
kendo autofit column
kendo grid resize column
kendo grid resize column programmatically
kendo grid resize column angular
kendo grid resize column width
kendo grid resize column jquery
kendo grid resize column event
kendo grid resize column mvc
kendo treelist resize column
kendo ui resize columns
kendo grid resize columns javascript
kendo grid column resize not working
kendo ui grid resize columns
kendo grid column resize not working in chrome
kendo grid auto resize column
kendo grid column resize handle width
kendo grid column resize false
kendo grid cannot resize columns

Convert session.lastAccessedTime into javascript date object

I need to convert session.lastAccessedTime object from jsp into Javascript Date object. Currently, it displays as long object. How can I convert to Javascript date object? console.log('...

Can't remove class

I'm trying to dubug next JavaScript code in on my HTML page: var langs = document.getElementsByClassName('ss-code-language'); for (var i in langs) { langs[i].classList.remove('ss-highlighted'); ...

canvas
canada
cancelled
canceled vs cancelled
canada vaccines
canada goose
cane corso
canes
canadian prime minister
cancun flights
canker sore
candy
cancer
cancun
canon
canvas prints
cancer sign
candace owens
canada news
candytopia