Question

我正在创建一个简单的按钮（某种类型），供用户在点击＆＃34; up＆＃34;时迭代多个选项。或＆＃34; down＆＃34;。

我使用jQuery在每次点击后检查是否有更多的东西（或向下）并相应地更新类/样式/选择。但是，如果我改变了触发＆＃34; on＆＃34;的元素的类。函数，即使选择器中指定的所有类都不存在（在DOM中），它仍然会触发（在单击时）。

在这个简化的例子中，如果你点击＆＃34; i.up.enabled＆＃34;元素然后它的类开关＆＃34; .up.disabled＆＃34;并且可见区域发生变化。好到目前为止。但是，如果您再次点击它，那么它会再次更新，它不应该作为用于调用＆＃39; on＆＃39;的选择器。功能是＆＃34; i.up.enabled＆＃34;而不是＆＃34; i.up。禁用＆＃34;。解决这个问题相当简单，但我想知道为什么会这样？

＆＃34; on＆＃34;从源而不是DOM＆amp;读取有没有更可接受的方式呢？

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);
});

And the fiddle is here

N.B。我很欣赏.data（）更适合操作data- *元素，但由于限制我必须使用attr（＆＃34; data - *＆＃34;，[value]）

Answer 1

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

即使修改了选择器也无关紧要，使用＆＃34;直接＆＃34;时，事件仍会附加这些元素。结合。

在动态生成元素或操作选择器（如删除和添加类）时，需要使用Event Delegation委托事件方法.on()。

一般语法

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

实施例

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

DEMO

Answer 2

您可以使用color = "Red"

删除on函数中的事件

＆＃13;

$(this).off("click");

＆＃13;

$('.wrapper i.enabled.up').on('click', function(e) {
  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);
  $(this).off("click");
});

＆＃13;

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;
}

＆＃13;

jQuery＆＃39; on＆＃39;点击不检查更新的选择器？

2 个答案: