jQuery:传播事件&行动

jQuery: propagating events & actions

本文关键字：amp 行动 事件 传播 jQuery      更新时间：2023-09-26

抱歉标题有误。

JSFiddle链接

描述：

我有两个事件附加到同一个元素，该元素根据其状态具有不同的类。

第一个click事件添加了一个expanded类并更改其文本（仅用于可见性目的）。

第二个click事件附加到由expanded类修改的元素。

问题：

第二个click事件从未激发。不删除类并更改文本。

如果你在没有CCD_ 6的情况下尝试它，它会立即激发两个first&第二个click事件，第一个事件不会对元素进行任何视觉更改。

jQuery

$('button').click(function() {
    $(this).addClass('expanded');
    $(this).text('Expanded class added');
    event.stopPropagation();
});
$(document).on('click','button.expanded', function() {
    $(this).removeClass('expanded');
    $(this).text('Expanded class removed')
});

问题：如何正确执行点击事件，同时两个事件都在做它们应该做的事情？

  1. 绑定button上的事件
  2. 检查单击的按钮是否具有类expanded，如果存在，则移除它，否则添加它
  3. 更新单击的元素的innerText。如果按钮添加了类expanded（第二步中的），则使用$(this).hasClass('expanded') ? "added" : "removed")的三元运算符将返回"added"，否则返回"removed"

代码：

$(document).on('click', 'button', function () {
    $(this).toggleClass('expanded') // Toggle `expanded` class of the clicked button
        .text('Expanded class ' + ($(this).hasClass('expanded') ? "added" : "removed")); // Update text
});

-演示-

编辑：为了好玩，要设置文本按钮的内容，可以使用CSS伪元素：

$(document).on('click','button', function() {
	$(this).toggleClass('expanded');
});
button:not([class]):before {
  content: "Click me"
}
button.expanded:after {
  content: "added";
}
button[class]:not(.expanded):after {
  content: "removed";
}
button[class]:before {
  content: "Expanded class "
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button></button>

我认为一种更简单的方法是将两个处理程序都放在委托点击事件中：

$(document).on('click','button', function(event) {
    if ($(event.target).hasClass('expanded')) {
        $(event.target).removeClass('expanded');
        $(event.target).text('Expanded class removed')
  }
  else {
        $(event.target).addClass('expanded');
        $(event.target).text('Expanded class added');
  }
  return false;
});

更新的fiddle：https://jsfiddle.net/jvL8z2dw/4/

让这个小清洁和坚固。

$('button').click(function() {
  $(this).toggleClass("expanded");
  if ($(this).hasClass("expanded")) {
    $(this).text('Expanded class added');
  } else {
    $(this).text('Expanded class removed')
  }
  return false;
});
.expanded {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>

这应该为做这件事

$(document).on('click', 'button', function (event) {
    $(this).toggleClass('expanded')
    if($(this).hasClass('expanded')) {
        $(this).text('Expanded class added');
    } else {
        $($this).text('Expanded class removed')
    }
    return false;
});
相关文章：