0

I have a page that is pulling content in from firebase and appending it to the page:

code:

function displaySavedData(Name, Company, Email, Phone, snap) {
    $('.data').append('<div class="each-container" data-del="'+snap+'"><div class="del">X</div><div class="row-margin"><div class="new-row-one">'+'Name: '+Name+'<br>'+'Company: '+Company+'<br>'+'Email: '+Email+'<br>'+'Phone: '+Phone+'</div></div></div>');
};

There is a div in there, for each div is added to the page is given a class of del with an X to display. I am trying to get a click event to work when that X is clicked but since the class is not present on the page as it loads the click event does not register. How can I get this to work after the page loads?

click event:

$('.del').click(function(){
    console.log('clicked');
});

JSFiddle: http://jsfiddle.net/0a5s7uLk/1/

Chipe
  • 4,641
  • 10
  • 36
  • 64
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Frank van Puffelen May 25 '15 at 23:46

1 Answers1

3

Switch your event to an 'on' event instead of click, 

$(document).on("click", ".del", function() {
  console.log('clicked');
});

This will hook the events for elements inserted to the dom at a later time.

Siada
  • 103
  • 1
  • 9