3

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

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

$(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 等，但它们永远不会像其他元素一样突出显示（它们在整个过程中都可以正常工作）。

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

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

4

2 回答 2

4

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

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

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

于 2010-12-28T02:56:41.613 回答
1

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

来自 jQuery 文档 =)

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

于 2010-12-28T03:46:09.917 回答