Здравствуйте. Столкнулся с проблемой непонимания this. Документация читал, но в ней мне многое непонятно.
Суть проблемы. Есть неопределенное количество элементов, по клику на один из них в дочерний элемент надо единожды вставить, например текст. Как сделал :
- родительские элементы обозначил классом,
- на класс повесил обработчик по click,
- контекст выполнения определяю по this,
- ищу в родителе элемент для вставки, вставляю текст.
- удаляю класс.
Мне казалось, что после удаления класса обработчик не будет больше работать для этого элемента, но класс удаляется, а клик по элементу продолжает вставлять текст.
Я что-то не понимаю, но не могу понять что) Объясните, пожалуйста, почему так происходит и как надо делать, чтобы такого не случалось.
Код посмотреть можно вот тут
https://jsfiddle.net/hgfpt97u/1/
Листинг ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.item {
height: 30px;
width: 100px;
margin-bottom: 20px;
background: #cccccc;
}
</style>
</head>
<body>
<div class="item click">
<div class="item-click"></div>
</div>
<div class="item click">
<div class="item-click"></div>
</div>
<div class="item click">
<div class="item-click"></div>
</div>
<div class="item click">
<div class="item-click"></div>
</div>
<script>
$('.click').click(function () {
var item = $(this);
item.find('.item-click').append('test');
item.removeClass('click');
console.log('test');
})
</script>
</body>
</html>