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 /名称/ onclick等，但它们永远不会像其他元素一样突出显示（它们在整个时间内继续正常工作）。

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

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

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）

JQuery点击除了某些div之外的任何地方以及动态添加的html的问题

2 个答案: