1

Ребят, приветствую. Только знакомлюсь с jQuery и столкнулся с примитивной задачей. Как сделать так, чтобы при клике, событие было на внутреннем элементе, если классы совпадают с родителем.

$('.element').on('click', function(e) {
  console.log(1);
});
.element {
  min-width: 50px;
  min-height: 50px;
  padding: 25px;
}
.el-parent {
  background-color: #444;
}

.el-child {
  background-color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element el-parent">
  <div class="element el-child">
    click me
  </div>
</div>

Если кликнуть на внутренний элемент, то консоль возвращает 2 единицы. То есть клик на внешний элемент тоже срабатывает. Пожалуйста, поясните, как правильно решить эту задачу(именно по классу элемент). Заранее спасибо. Всем хорошего дня =)

1
  • e.stopPropagation(); - предотвращает дальнейшее всплытие события. Тогда срабатывать будет только для нужного вам элемента. 4 окт 2017 в 12:33

1 ответ 1

1

Просто задайте обработчик события вот так:

Изменяю ответ после разговора с автором.

$('.element').on('click', function(e) {
  console.log($(this).attr('class'));
  e.stopPropagation();
  e.preventDefault();
});
.element {
  min-width: 50px;
  min-height: 50px;
  padding: 25px;
}
.el-parent {
  background-color: #444;
}

.el-child {
  background-color: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element el-parent">
  <div class="element el-child">
    click me
  </div>
</div>

Вам просто нужно было блокировать всплытие событий, и для этого есть такие методы как stopPropagation() и preventDefault().

10
  • Тогда при клике на внешний элемент, срабатывать обработчик события не будет. Так же если уровень вложенности будет больше, придется каждому указывать разные селекторы. Есть какое-то универсальное решение? 4 окт 2017 в 12:29
  • @ДанилСысоев вам нужен просто при клике посмотреть это внутренний или нет? или обработчик только на внутренний элемент? 4 окт 2017 в 12:32
  • @ДанилСысоев Изменил ответ, посмотрите. 4 окт 2017 в 12:36
  • @RazmikGalstyan, простите, а зачем тут e.preventDefault();? 4 окт 2017 в 12:38
  • @Razmik Galstyan видимо я некорректно задал вопрос. Дело в том, что для каждого блока будет отдельное всплывающее окно, и уровень вложенность может быть больше. И мне необходимо, чтобы данные выводились именно для того блока, по которому кликнули(для примера css свойство background-color) 4 окт 2017 в 12:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.