Невозможно различить внутренние и внешние элементы в этом случае

#jquery

Вопрос:

Из полученного ответа 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>';
  }

При завершении закрытия отображается перекрестная кнопка, поэтому при нажатии на нее

Я написал для этого прослушиватель, так что при нажатии на перекрестную кнопку я удаляю добавленные элементы, но проблема, с которой я сталкиваюсь здесь, заключается в том, что когда я выбирал элементы a href, он также удалял раздел

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

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

});

введите описание изображения здесь

1. вы написали какое-либо событие щелчка для этого a тега ..?

2. нет, я не писал для тега

3. Является ли ваш класс тегом .secclass ????

4. нет, но он присутствует в этом разделе .

Ответ №1:

Клики распространяются вверх, поэтому вам нужно указать вашей внутренней ссылке не делать этого. С моей точки зрения, это было бы что-то вроде:

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

Документация для этого здесь http://api.jquery.com/event.stoppropagation /

Или вы можете изменить событие close click, чтобы оно указывало непосредственно на курсивное закрытие в разделе вместо любого щелчка по разделу

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

Возможно, вы захотите фактически удалить раздел, а не просто очистить его. Это было бы .remove() вместо .html(«»)

1. Поскольку ваша внутренняя ссылка имеет # для href, у вас должен быть уже готовый код для обработки кликов по этому? Вам просто нужно убедиться, что вы передаете событие в эту функцию, как я показываю в примере «функция (e)», где e является событием. Затем вы помещаете e.stopPropagation(); в качестве первой строки кода в этой функции. Это также предотвратит запуск щелчка раздела secclass. Если вы не остановите распространение, оно запустит ВСЕ события щелчка, начиная с самого внутреннего и работая наружу.

2. Если я нажму на кнопку closw, она удалит только один элемент href , возможно ли удалить все элементы a href при нажатии на кнопку закрытия??

3. Если вы имеете в виду, можете ли вы закрыть все свои разделы class secclass после нажатия кнопки закрытия, вы можете. Просто измените свой код на $(«.secclass»).html(«»); и он очистит html от всех из них. Или .remove() для их полного устранения.

Ответ №2:

Добавьте этот код в свою $(document).ready(){} функцию.

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

Вот #topping-close ваш close button ID .