контекст this
Здравствуйте. Столкнулся с проблемой непонимания 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>
|
|
Да, так, большое вам спасибо. Всю ночь пытался сам разобраться, безуспешно.
Можно пояснить разницу между вашим решением и тем, что делал я? |
Цитата:
|
Цитата:
$('.click').on('click', function ()
или делегировать как в .delegate() (ваш код):
$('body').on('click', '.click', function()
причем делегировать естественно выгоднее ближайшему родителю существующему на странице. Что собственно происходит и в .live(), если задан контекст, иначе вверх по дереву DOM... и это были проблемы JQ. ) |
Не уверен, что все правильно понял, но судя по всему при использовании метода .bind() в объект JQ пишется указатель на DOM элемент. Удаление селектора не приводит к потере указателя, на что я рассчитывал делая removeClass. То ли указатель перезаписывается, то ли он вообще представляет из себя не ссылку на селектор - этого я так и не понял.
Но суть в том, что обработчик все равно продолжит срабатывания при событии, а this будет иметь соответствующий контекст. Если это поведение нежелательно, то надо или .delegate() использовать, который видимо как-то по другому работает с указателями и тогда удаление класса сработает, или же прописывать $(this).unbind(). Печально, что эти моменты явно не прописаны в документации. Большое вам спасибо, что помогли разобраться. |
chelfenix, при делегировании обработчик вешается на родительский элемент. И там уже проверяется класс (селектор твой), а он уже убран при первом клике, вот и не срабатывает.
А при bind просто на DOM узле висит обработчик. Соответственно его надо убирать при клике. |
| Часовой пояс GMT +3, время: 02:37. |