запустить JQuery нажмите только после загрузки страницы

Question

У меня есть страница, которая тянет содержание в от firebase и добавления его на страницу:

код:

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>'); 
}; 

Существует ДИВ там, для каждого div добавляется на страницу, предоставляется класс del с отображением X. Я пытаюсь получить событие щелчка, чтобы работать, когда этот X щелкнут, но поскольку класс отсутствует на странице, поскольку он загружает событие клика, он не регистрируется. Как я могу заставить это работать после загрузки страницы?

событие

нажмите:

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

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

Answer 1

Переключите событие к 'на' случае вместо щелчка,

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

Это зацепит события для элементов, вставленных к дому в более позднее время.