Question

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

有我目前的代码..

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

当您点击按钮时 - 您应该在当前按钮中收到带有动物名称的提醒 - 这是所需的行为

然而 - 当你点击红色框内的空白区域时 - 你不应该得到警告..我想要以某种方式阻止它../

非常感谢任何帮助..

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>

动态添加的子元素的事件侦听器也标记为Parent

1 个答案: