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识别。为了解决这个问题，请使用event delegation，将新添加的项目中的事件冒泡到jQuery在页面加载时运行时的DOM中的某个点。许多人使用document作为捕捉起泡事件的地方，但没有必要在DOM树上走得那么高。理想情况下you should delegate to the nearest parent that exists at the time of page load.

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

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() {...

将确保现在和将来的所有孩子都能获得handled。

Answer 2

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

这是实际的代码还是只是复制了它的一部分？

在锚标记开头后，文本中有拼写错误：href 选择器看起来很好。

这是the snippet

修改

javascript调用的顺序很重要。在DOM中插入标题后，您需要指定click事件

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

2 个答案: