Jquery click events stacking

У меня есть 3 элемента. У каждого из них есть элемент внутри них, который при нажатии находит своего родителя и отправляет его для работы. Проблема заключается в том, что события щелчка, похоже, являются укладкой. Например, если я нажму на элемент №1, он отправит элемент №1 для работы. Затем, щелкнув элемент № 3, он отправит элемент №1 и элемент №3. Затем, если щелкнуть элемент № 2, он отправит элемент №1, элемент № 3 и элемент №2. Как мне получить его только для отправки одного прямого родителя события click.Jquery click events stacking

Соответствующий код:

$('.tiles ').on('click', '.fa-pencil', function(e){ 
     e.stopPropagation(); 

     var tile = $(this).closest(".live-tile"); 
     showEditDialog(tile); 

    });

.tiles будет классом обертки всех родителей доля, .live метел быть отдельными родители, которые получают отосланы, .fa-карандаш будучи ребенком, который получает щелкнул, и showEditDialog - это отправка.

EDIT ----

<div class="tiles"> 
    <!-- <div class="live-tile" > 
     <span id = "bar" class = "tile-title optionsBar"><i class="fa fa-2x fa-pencil"></i><i class="fa fa-2x fa-times-circle"></i></span> 
     <div class ="mainDiv"></div> 
     <span class = "tile-title imageBar"><img class = "image" src = "http://9gag.com/favicon.ico"></img></span> 
     </div>--> 
</div>

Содержание в комментариях (все, кроме .tiles) динамически добавляется, но это то, что это будет выглядеть.

источник

2014-09-20 DasBeasto

Не могли бы вы поделиться своей разметкой? – Josep

Добавлена разметка в редакторе – DasBeasto

У вас есть несколько div с черепицей класса? – Mic1780

Nevermind Я узнал, что это не тот конкретный момент в коде, который затрагивает проблему. Функция showEditDialog() вызывала себя дважды и по какой-то причине кипела на родительскую плитку для второй. Я просто удаляю вызов самому себе, и он только называется правильным после.

источник

2014-09-20 04:31:07 DasBeasto

Рад, что вы нашли решение. Не могли бы вы принять свой собственный ответ, чтобы другие (как и я) не думали, что это все еще нуждается в решении? благодаря – Basic

-1

Поскольку вы идентифицируете все кнопки с помощью классов .tiles, вы должны каждый раз анализировать UNIQUE дочерний селектор.

источник

2014-09-20 03:57:59

. Я не сделал этого, но я думаю, что вы ошибаетесь, .tiles не идентифицирует кнопки .fa-pencil. Я добавил разметку, чтобы уточнить. А при щелчке $ (это) следует определить конкретный, исправить? – DasBeasto

Имеет больше смысла с разметкой, но даже в этом случае это связано с тем, как javascript создает новые переменные.И не $ (это) относится к рассматриваемому объекту, к которому применяется функция обратного вызова, которая в этом случае будет объектом окна. –

Вместо остановкиПрограмма. Попробуйте переключить его с stopImmediatePropagation()

От http://devdocs.io/jquery/event.stoppropagation

Предотвращает событие от бурлят дерева DOM, предотвращая любые родительских обработчиков из уведомления о событии.

От http://devdocs.io/jquery/event.stopimmediatepropagation

В дополнение к поддержанию каких-либо дополнительных обработчиков на элементе из выполняется, этот метод также останавливает барботирование с помощью неявно вызывающей event.stopPropagation(). Чтобы просто предотвратить событие от , пузырьков к элементам предка, но разрешить другим обработчикам событий выполнить один и тот же элемент, вместо этого мы можем использовать event.stopPropagation() .

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

источник

2014-09-20 04:04:05 Mic1780

Ужасно не изменилось, я тоже подумал/подумал, что обработчики событий все еще привязаны к элементам с элементарным щелчком, но ничто, кажется, не останавливает его. – DasBeasto

Jquery click events stacking

ответ

Смежные вопросы