触发动态元素上的自定义事件

Question

我创建了自定义login.validate事件并将其绑定到.question动态元素。 我无法使用触发方法（）触发新事件。这里是JS小提琴和脚本http://jsfiddle.net/PzSYM/400/

<h2></h2> 
<button>generate new element</button> 
<p class="generateEvent">Trigger event validate</p> 


$("button").click(function() { 
    $("h2").html("<p class='test'>click me</p>") 
}); 


$('p.test').bind('validate', function(){ 

    alert('This is working'); 
}) 

$('h2').on('login.validate', 'p.test', function(){ 
    console.log('Good now the validate event need to be trigered'); 
}); 

$('.generateEvent').click(function(){ 
    $('p.test').trigger('login.validate'); 

}); 

如何触发动态元素的自定义事件？

Answer 1

您需要使用事件代表。这里是工作示例：

http://jsfiddle.net/tkirda/PzSYM/414/

$("button").click(function() { 
    $("h2").html("<p class='test'>click me</p>") 
}); 


$(document).on('validate', 'p.test', function() { 
    alert('This is working'); 
}) 

$('h2').on('login.validate', 'p.test', function() { 
    console.log('Good now the validate event need to be trigered'); 
}); 

$('.generateEvent').on('click', function() { 
    $('p.test').trigger('validate'); 
});