Question

我有这个HTML元素：

<div class="row preview-pictogram">
  <div class="column3 col-xs-3" data-index="3">
    <span class="index">Spalte <span>3</span></span>
    <span class="dec p-2">-</span>
    <span class="width">3</span>
    <span class="inc p-2">+</span>
  </div>
  <div class="column1 col-xs-4" data-index="1">
    <span class="index">Spalte <span>1</span></span>
    <span class="dec p-2">-</span>
    <span class="width">4</span>
    <span class="inc p-2">+</span>
  </div>
  <div class="column4 col-xs-3" data-index="4">
    <span class="index">Spalte <span>4</span></span>
    <span class="dec p-2">-</span>
    <span class="width">3</span>
    <span class="inc p-2">+</span>
  </div>
  <div class="column2 col-xs-3" data-index="2">
    <span class="index">Spalte <span>2</span></span>
    <span class="dec p-2">-</span>
    <span class="width">3</span>
    <span class="inc p-2">+</span>
  </div>
</div>

是一个（委派的）事件，用于侦听.dec和.inc类的点击事件：

$(".dec, .inc").on("click", this.overlay, function () {
  _this.updateWidth(this);
});

这很好用。但有一次我用这个代码用类名对列进行排序：

ColumnConfigurator.prototype.sortColumns = function (columns) {
  var items = $("div", columns).get();
  items.sort(sort_by_class);
  $(columns).html(items);
};

var sort_by_class = function(a, b) {
  return $(a).attr("class").localeCompare($(b).attr("class"));
};

在那之后，上面的委托事件不再起作用了。我想知道为什么会这样。我认为委托事件的重点在于它们也适用于新元素。 this.overlay是一个包含上述HTML的元素，它根本不会改变。

Answer 1

编辑：

在检查了@noriMonsta后，我意识到我写错了代码。我更新了我的答案，但我给了他所有的功劳。

我认为委托事件的重点在于它们也适用于新元素。

是的，但您没有委派事件，而是将它们直接附加到目标元素。

$("div span").on("click", ".dev, .inc", function () {
  _this.updateWidth(this);
});

在上面的代码中，您将事件委托给div元素。只要div一直存在，即使您更改了内部HTML，您的事件也会触发。

Cleaner，正如noriMonsta所写：

this.overlay.on("click", ".dec, .inc", function () {
  _this.updateWidth(this);
});

正如您所说，this.overlay是一个内容不会永远改变的元素。

在以下代码段中，您可以检查DOM操作后未批处理（或直接）事件如何停止工作：

＆＃13;

$(".dec, .inc").on("click", function() {
  $("#results").append("not delegated<br>");
});
$(".column").on("click", ".dec, .inc", function() {
  $("#results").append("delegated<br>");
});
$("#alterDOM").on("click", function() {
  $(".column").html( $(".column").html() );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="column">
    <span class="dec">dec</span>
    <span class="inc">inc</span>
  </div>
  <div class="column">
    <span class="dec">dec</span>
    <span class="inc">inc</span>
  </div>
</div>

<button id="alterDOM">Alter DOM</button>
<div id="results"></div>

＆＃13;

Answer 2

应该在父级上使用

.on（）。在你的情况下，如果this.overlay是包含发布的HTML的jQuery元素，那么

this.overlay.on("click", ".dec, .inc", function () {
  _this.updateWidth(this);
});

委派事件对排序后的元素不起作用

2 个答案:

编辑：