jQuery'on'点击不检查更新的选择器？

Question

我正在为用户创建一个简单的按钮(类型),以便在单击"向上"或"向下"时迭代多个选项.

我使用jQuery在每次单击后检查是否有更多的东西(或向下)并相应地更新类/样式/选择.但是,如果我更改触发"on"函数的元素的类,它仍然会触发(在单击时),即使选择器中指定的所有类都不存在(在DOM中).

在这个简化的示例中,如果单击"i.up.enabled"元素,则它的类切换".up.disabled"并且可见字段发生更改.好到目前为止.但是,如果再次单击它然后再次更新,它不应该(？),因为用于调用'on'函数的选择器是"i.up.enabled"而不是"i.up. disabled ".解决这个问题相当简单,但我想知道为什么会这样？

"on"是否从源代码而不是DOM中读取并且有更多可接受的方式吗？

HTML

<div class="wrapper">
    <div data-state="1">Number 1</div>
    <div data-state="0">Number 2</div>
    <i class="up enabled">up</i>
</div>

CSS

i {
    cursor: pointer;
}
div[data-state="0"] {
    display: none;
    padding: 0 2rem;
    border: 1px solid gray;
}
div[data-state="1"] {
    padding: 0 2rem;
    border: 1px solid gray;
}
.wrapper > * {
    display: inline-block;
    font-size: 90%;
}
i.disabled {
    color: gray;
    cursor: default;
}
i.enabled {
    color: blue;
    cursor: pointer;
}

JavaScript/jQuery

$('.wrapper i.enabled.up').on('click', function(){
    var $current = $(this).siblings('div[data-state="1"]');
    var $next = $(this).siblings('div[data-state="0"]');
    $current.attr('data-state', 0)
    $(this).addClass('disabled').removeClass('enabled');
    $next.attr('data-state', 1);
});

小提琴就在这里

NB我很欣赏.data()更适合操作data-*元素,但由于限制,我必须使用attr("data-*",[value])

Answer 1

目前您正在使用的是一种"直接"绑定,它只会在您的代码进行事件绑定调用时附加到页面上存在的元素.

即使修改了选择器也没关系,当使用"直接"绑定时,Event仍会附加这些元素.

当动态生成元素或操作选择器(如删除和添加类)时,您需要使用.on()委托事件方法使用事件委派.

一般语法

$(staticParentElement).on('event','selector',callback_function)

例

$('.wrapper').on('click', 'i.enabled.up', function(){   
});

DEMO