JQuery选择器理解错误

JQuery selectors missunderstanding

本文关键字：错误 选择器 JQuery      更新时间：2024-03-04

我正在尝试制作一个简单的树视图脚本，并从打开/关闭节点开始。但我遇到了一些问题：

$(function() {
    $('#tree li.closedNode').on('click',function(e){
        e.stopPropagation();
        $(this).removeClass('closedNode').addClass('openedNode').children(':not(a.caption)').show();
    })  
    $('#tree li.openedNode').on('click',function(e){
        e.stopPropagation();
        $(this).addClass('closedNode').removeClass('openedNode').children(':not(a.caption)').hide();
    })

jsfiddle：http://jsfiddle.net/F33dS/14/

所以，然后你点击"点击这里"，它正在关闭，更改类，但它仍然为"li.openedNode"触发事件。我知道，我错过了一些简单的事情，但什么？我真的找不出问题。那么，为什么它会以这种方式工作呢？

您正在将事件绑定到尚不存在的事物。

您需要使用.on()，以便它针对所有匹配的元素，无论它们现在存在还是将来存在。

http://jsfiddle.net/F33dS/16/

$('#tree').on('click', 'li.closedNode', function(e){
    e.stopPropagation();
    $(this).removeClass('closedNode').addClass('openedNode').children(':not(a.caption)').show();
})  
$('#tree').on('click', 'li.openedNode', function(e){
    e.stopPropagation();
    $(this).addClass('closedNode').removeClass('openedNode').children(':not(a.caption)').hide();
})

您的节点在页面加载时具有类openNode。

脚本查找$('#tree li.openNode')并匹配元素。

脚本查找$('#tree li.closedNode')，但不匹配任何内容。

只有当用户单击元素时，才能找到$('#tree li.closedNode')的匹配项。

因此，我们告诉它的父对象哪个存在，以便为两个匹配的子对象查找单击事件。一旦出现一个MATCHING子体（当您更改类名时），事件就会触发。

发件人http://api.jquery.com/on/

事件处理程序仅绑定到当前选定的元素；当代码调用.on（）时，它们必须存在于页面上。为了确保元素存在并且可以选择，请在文档就绪处理程序中为页面上HTML标记中的元素执行事件绑定。如果将新的HTML注入到页面中，请选择元素，并在将新HTML放入页面后附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。

委托事件的优点是，它们可以处理以后添加到文档中的子元素中的事件。通过选择在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序。

在原始代码中，您设置了正确的选择器，但当时没有匹配项。因此，当时存在的#tree可以存储其后代上发生的事件。

还有一件事

为什么要使用jQuery隐藏和显示列表元素？你无论如何都要添加一个类，这样你就可以用CSS来完成。

相关文章：