javascript - 不会通过脚本将事件监听器添加到后来添加到DOM中的元素

我有一个原始的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(); });

最佳答案

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

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

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