javascript - 动态添加子元素的事件监听器也标记为父元素

Question

我正在使用 JQuery 向 HTML 动态添加按钮。我有需要添加到动态添加按钮的事件。但是，我不希望在单击按钮的父 div 时触发相同的事件。

有我目前拥有的代码..

var buttons = (function() {

  var categories = ["cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens"];

  var addButtons = function() {

    for (var i = 0; i < categories.length; i++) {
      var btn = $("<button>");
      btn.attr("id", "btn-" + i);
      btn.addClass("btn btn-primary categories");
      btn.text(categories[i]);
      $("#btnSection").append(btn);
    }

  };

  var addEventListeners = function() {
    $("#btnSection").on("click", function(e) {
      e.stopPropagation();
    });
    $("#btnSection").on("click", $("#btnSection .categories"), function(event) {
      event.stopPropagation();
      console.log(event.target.textContent);

      alert(event.target.textContent);
    });

  };

  return {
    addButtons: addButtons,
    addEventListeners: addEventListeners
  };
})();


buttons.addButtons();

h1 {
  text-align: center;
}

h1 {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
}

div {
  font-family: 'Cinzel', serif;
  /* font-size: 24px; */
  font-weight: 400;
  border: red solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="btnSection">
</div>

当您单击按钮时 - 您应该在当前按钮中收到包含动物名称的警报 - 这是所需的行为

但是 - 当您单击红色框内的空白区域时 - 您不应该收到警报..我希望以某种方式阻止它../

非常感谢任何帮助..

Answer 1

您对 JQuery .on() method 的第二个参数 是不正确的。它必须是有效的选择器，而不是 JQuery 对象。

您还拥有:

$("#btnSection").on("click", function(e) {
  e.stopPropagation();
});

这似乎与您的操作无关。

此外，您还需要调用 buttons.addEventListeners() 方法。

var buttons = (function() {

  var categories = ["cats", "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", 
                    "tigers", "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", 
                    "dogs", "lions", "pigs", "goats", "chickens", "cats", "tigers", "dogs", 
                    "lions", "pigs", "goats", "chickens"];

  var addButtons = function() {
    for (var i = 0; i < categories.length; i++) {
      var btn = $("<button>");
      btn.attr("id", "btn-" + i);
      btn.addClass("btn btn-primary categories");
      btn.text(categories[i]);
      $("#btnSection").append(btn);
    }
  };

  var addEventListeners = function() {
    // The second argument here needs to be a valid CSS selector
    $("#btnSection").on("click", "button.categories", function(event) {
      event.stopPropagation();
      console.log($(this).text()); // Adjusted to the JQuery syntax since you are using JQuery
    });
  };

  return {
    addButtons: addButtons,
    addEventListeners: addEventListeners
  };
})();

buttons.addButtons();
buttons.addEventListeners(); // You didn't have this call!

h1 { text-align: center; }

h1 {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
}

div {
  font-family: 'Cinzel', serif;
  /* font-size: 24px; */
  font-weight: 400;
  border: red solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="btnSection"></div>