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

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()方法的第二个参数不正确。 它必须是有效的选择器，而不是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>