javascript - 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 ，这很相似。