JQuery 单击除某些 div 之外的任何位置以及动态添加 html 的问题

Question

我希望该网页在您单击其中一个元素时突出显示某些元素，但如果您单击页面上的其他任何位置，则所有这些元素不应再突出显示。

我通过以下方式完成了此任务，除了一件事（如下所述）之外，它工作得很好：

$(document).click(function() {
    // Do stuff when clicking anywhere but on elements of class suggestion_box
    $(".suggestion_box").css('background-color', '#FFFFFF');
});
$(".suggestion_box").click(function() { 
    // means you clicked on an object belonging to class suggestion_box
    return false;
});

// the code for handling onclicks for each element
function clickSuggestion() {
    // remove all highlighting
    $(".suggestion_box").css('background-color', '#FFFFFF');
    // then highlight only a specific item
    $("div[name=" + arguments[0] + "]").css('background-color', '#CCFFCC');     
}

这种强制突出显示元素的方法工作得很好，直到我向页面添加更多 html 而无需加载新页面。这是通过 .append() 和 .prepend() 完成的。

我从调试中怀疑页面没有“意识到”动态添加到页面的新元素。尽管新的、动态添加的元素具有适当的类名/ID/名称/onclicks 等，但它们永远不会像其他元素一样突出显示（它们始终可以正常工作）。

我想知道我的方法不适用于动态添加的内容的可能原因是否是页面无法识别页面加载期间不存在的元素。如果这是可能的，那么有没有办法在没有页面加载的情况下协调这个问题？

如果这条推理是错误的，那么我上面的代码可能不足以显示我的网页出了什么问题。但我真的只是对这种想法是否可行感兴趣。

Answer 1

使用 .live 来“将处理程序附加到事件与当前选择器匹配的所有元素，现在和将来”。示例：

$(".suggestion_box").live("click", function() { 
    // means you clicked on an object belonging to className
    return false;
});

另请参阅 .delegate，这是类似的。

Answer 2

由于 .live() 方法在事件传播到文档顶部后才对其进行处理，因此无法停止实时事件的传播。类似地，由 .delegate() 处理的事件将始终传播到它们被委托的元素；当调用委托的事件处理程序时，其下方任何元素上的事件处理程序都已经执行。

来自 jQuery 文档 =)

（只是为了更好地解释为什么 @karim79 还建议使用委托方法 ;P ）