javascript - 对于稍后通过脚本添加到 DOM 的元素，不会调用事件监听器

Question

我有一个原始的 HTML，例如:

<tr>
  <td class = 'greatTD' id = 'great1'>I am too great to be anything less.</td>
</tr>

然后我通过 JavaScript 添加了一个元素，如下所示:

function AddStuff()
{
    var s = '<tr><td class = "greatTD" id = "great2">I am even greater.</td></tr>';

    $('#foo').after(s);
}

function WireHandlers()
{
    $('.greatTD').click(GreatTDClickHandler);
}

function GreatTDClickHandler()
{
    // not being called for #great2
    // how do I make it be called?
}

$(document).ready(function() { WireHandlers(); });

Answer 1

在 .greatTD 元素存在之前，事件处理程序在加载时被分配。因此，您需要使用委托(delegate)处理程序，如下所示:

function WireHandlers() {
    $('#foo').on('click', '.greatTD', GreatTDClickHandler);
}

这会将事件附加到加载时出现的 #foo 元素，然后对其进行过滤，以便仅在单击 .greatTD 元素时执行。