jquery - 在动态元素上触发自定义事件

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