使用jQuery添加可单击的表格标题

Question

我想用jQuery为表添加一个可点击的标题.我这样添加:

$("table.table-legend").prepend('<caption class="edit-select"><a href="javascript:;">Select All - None</a></caption>');

这有效,我确实得到了一个可点击的标题,但我无法弄清楚如何定义被调用的函数.

我试过了:

$('table caption a').on('click', function () {

和

$('.edit-select a').on('click', function () { 

以及其他一些方法,但无论如何,我的功能都没有被调用.这样做的正确方法是什么？

Answer 1

$(document).on('click', '.edit-select a', function() {
    // do stuff
});

jQuery在运行时只知道页面中的元素,因此添加到DOM的新元素无法被jQuery识别.为了解决这种使用事件委托问题,将新添加的项目中的事件冒泡到jQuery在页面加载时运行时在DOM中的某个点.许多人使用它document作为捕捉起泡事件的地方,但没有必要在DOM树上走得那么高.理想情况下,您应该委托给页面加载时存在的最近的父级.

请记住,只要在包含元素后将事件绑定到它们,就可以绑定在页面加载期间动态添加到DOM的元素,而不依赖于冒泡和委派.考虑以下示例 -

var newKid = '<div class="kid">Jan</div>';
$('.parent').append(newKid);

$('.kid').click(function() {
    var kidName = $(this).html();
    var message = kidName + ' got clicked<br />';
    $('.whoGotClicked').append(message);
});

var newKid = '<div class="kid">Cindy</div>';
$('.parent').append(newKid);

您认为谁会被添加到"点击"列表中？Marsha包含在原始标记中,Jan在脚本运行时被添加到DOM中,但是在click事件绑定到kid类之前.绑定发生后,Cindy被添加到DOM中.Marsha和Jan都是由click事件处理的,而Cindy则处于寒冷状态.使用事件委托

$(document).on('click', '.kid', function() {...

将确保现在和将来的所有孩子都能得到处理.