'.on' click not running function?

Question

У меня есть функция, которая при запуске новой разметки генерируется на лету ...

$('.search input[type="image"]').on('click', function(){ 

    // Open directions in a map 

    if($('#TXT_SAddr').val() === ''){ 
     return false; 
     $('.directions .search').css('background' , '#ff0000'); 
    } else { 

     var from = $('#TXT_SAddr').val(); 
     var to = $('.postal-code').html(); 
     var directions = 'http://maps.google.com/maps?saddr=' + from + '&daddr=' + to + '&output=embed'; 
     var modal = '<div class="apply-modal modal"><a class="close-apply-now" style="margin-bottom: 20px;"><img src="http://site.co.uk/images/closeModal.png" alt="Close" style="border-width:0px;"></a><div class="holder"><iframe src="'+directions+'" style="border:none; width:100%; height:500px;" border="0"></iframe></div></div>'; 

     $('body').prepend('<div class="modalOverlay"/>' + modal); 

     $('.modal').animate({ 
       'opacity': 1, 
       'top': '100px' 
      }, 700, 'easeOutBack'); 

    } 

    return false; 

}); 

Если вы можете видеть, выше генерирует DIV с якоря под именем класса «крупным apply- Теперь'.

Теперь я хочу, чтобы привязать функцию к этому, и я попытался с помощью ...

$('a.close-apply-now').on('click', function(){ 
    alert('asdasd'); 
}); 

не повезло, кто-то может увидеть, где я могу быть неправильно? Даже мое предупреждение не работает.

Answer 1

Синтаксис для делегирования событий несколько отличается.

Событие необходимо связать с элементом, который уже существующим в DOM, а селектор целевого элемента должен быть передан в качестве второго аргумента

$(document).on('click', 'a.close-apply-now', function(){ 
    alert('asdasd'); 
}); 

Answer 2

Поскольку close-apply-now DIV добавляются динамически, вам необходимо использовать event delegation зарегистрировать обработчик события, как:

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$('body').on('click', 'a.close-apply-now', function(event) { 
    event.preventDefault(); 
    alert('asdasd'); 
}); 

Это приложить click события любых анкеров с классом близко применяется, теперь ш в элементе body.

Answer 3

close-apply-now div добавлен динамически. Вы должны добавить параметр селектора, иначе событие напрямую связано (не работает для динамически загруженного содержимого) вместо делегированного. См http://api.jquery.com/on/#direct-and-delegated-events

Изменить код

$(document.body).on('click', '.update' ,function(){ 

Набор JQuery получает событие, то оно делегирует для элементов, совпадающих селектор заданного в качестве аргумента. Это означает, что вопреки при использовании live элементы набора jQuery должны существовать при выполнении кода.

Используйте метод live() jQuery. Описание: Прикрепите обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

$("a.close-apply-now").live("click", function(){ 
    alert('asdasd'); 
}); 

Try Both in Jsfiddle