在这种情况下，无法区分内部和外部元素

Question

从收到的Ajax响应中，我将元素附加到一个部分，如下所示：

 success: function (response) {
 var toppingres = response;
 var toppingcart = '<img src="images/arrow-topping.png"/>';
  for (var i = 0; i < toppingres[0].toppings.length; i++){
 toppingcart += '<section class="secclass" id='+id_attr_val+'><i id="topping-close"></i>'
  toppingcart += '<a href="#">'+toppingres[0].toppings[i]+'</a>';
  toppingcart += '</section>';
  }

顶部关闭节目显示一个十字按钮，因此点击该

时

我已为此编写了一个监听器，因此当点击十字按钮时，我将删除添加的元素，但我面临的问题是 就是当我选择了一个href元素时，它也删除了

部分

$(document).on("click", ".secclass", function () 
{
 var id_attr_val = $(this).attr("id");

 $("section#"+id_attr_val+".secclass").html('');

});

Answer 1

点击向上传播，因此您需要告诉您的内部链接不要这样做。在我的头顶，这将是：

$(document).on("click", ".secclass a", function (e) {
    e.stopPropagation();
});

此处的文档http://api.jquery.com/event.stoppropagation/

或者您可以更改您的关闭点击事件，直接指向该部分中的斜体，而不是点击该部分

$(document).on("click", ".secclass i", function () 
{
   $(this).closest(".secclass").html("");
});

您可能希望实际删除该部分而不是仅清空它。那将是.remove（）而不是.html（“”）

Answer 2

将此代码添加到$(document).ready(){}功能中。

$("#topping-close").on("click", function (event) {
    event.stopPropagation();
});

此处#topping-close是您的close button ID。