Question

我有一些像这样的HTML

<li class="dropable">...</li>
<li class="dropable">...</li>
<li class="dropable">...</li>

我使用jQuery更改类名

jQuery('.dropable').addClass('dropable-mob');
jQuery('.dropable').removeClass('dropable');

我有两个案例的事件监听器

jQuery('.dropable-mob').click(function(){....})
jQuery('.dropable').click(function(){....})

问题是当类是.dropable-mob并且我点击它调用的页面上的元素。可点击的动作，但是可丢弃的类目前甚至不存在

Answer 1

当您将事件绑定到DOM元素时，它们将绑定到元素本身，而不是绑定到其类名：选择器仅用于确定将事件绑定到哪个元素。删除类名不也会删除已绑定到该DOM元素的click事件：

＆＃13;

$('.foo').on("click", function() {
  console.log("CLICKED");
});

// Remove the class, but the bound event will remain:
$('.foo').removeClass('foo');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="foo">Click me</button>

＆＃13;

类似地，向元素添加类名不会将事件附加到在添加类名之前绑定的元素：

＆＃13;

// This won't match anything because when it's called, nothing has .bar:
$('.bar').on("click", function() {
  console.log("CLICKED");
});

// Adding the 'bar' class later will have no effect, because the attempt at event binding already happened:
$('.foo').addClass('bar');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="foo">Click me</button>

＆＃13;

如果要将事件与类名相关联而不是与特定DOM元素相关联，则可以使用委派事件。这里，事件被绑定到更高级别的DOM元素，在事件触发时将在其内容中搜索与选择器匹配的元素：

＆＃13;

//This delegated event won't match anything at first:
$('.container').on("click", ".foo", function() {
  console.log("CLICKED");
});

// This will allow the delegated event to fire:
$('#switch').on("click", function() {
  $('.container button').addClass('foo');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button>Click me</button>
</div>

<button id="switch">Add class</button>

＆＃13;

澄清区别：正常事件绑定在绑定事件时使用选择器，并将事件附加到特定匹配的DOM元素。委托事件绑定将事件绑定到父元素，并在触发事件时使用选择器。

Answer 2

委派听众，以便考虑班级变更

jQuery('ul')
    .on('click', '.dropable-mob', function(){....})
    .on('click', '.dropable', function(){....})

Answer 3

使用以下代码：

$("li.dropable").each(function(index) {
  $(this).removeClass('dropable').addClass('dropable-mob');
});

jQuery通过他的旧类名

3 个答案: