将事件处理程序添加到新创建的元素

时间:2012-08-09 17:14:09

标签: jquery dom

我正在尝试将新元素添加到有序列表中,并为其删除链接:

$('#list ol').append('<li>' + label + ' <a href="#remove_'+id+'">[remove]</a></li>');

但这不起作用:

$('a[href^="#remove"]').on('click', function(event){
    alert('Removing: '+$(this).attr('href').substr(8));
    event.preventDefault();
});

知道为什么吗?

2 个答案:

答案 0 :(得分:8)

在jQuery标记中包装新元素并在那时应用事件处理程序。与使用有些复杂的jQuery选择器在元素已经插入DOM之后分配事件处理程序相比,这是一种更简洁,更有效的方法:

//this line will create your element in memory, but not insert it to the DOM
var newElmt = $('<li>' + label + ' <a href="#remove_'+id+'">[remove]</a></li>');

//you can apply jQuery style event handlers at this point
newElmt.on('click',function(e) {

    alert('Removing: '+$(this).attr('href').substr(8));
    event.preventDefault();
});

//insert the element as you were before
$('#list ol').append(newElmt);

答案 1 :(得分:0)

$('#list').on('click', 'a[href^="#remove"]', function(event){
    alert('Removing: '+$(this).attr('href').substr(8));
    event.preventDefault();
});

当您动态附加li时,您需要使用.on()作为委托处理程序进行委托事件处理。