Как связать функцию (при наведении) на элемент только один раз?

Question

Как связать функцию (при наведении) на элемент только один раз?

0

У меня есть div с определенным атрибутом данных, называемым data-id, а в jQuery у меня есть переменная, называемая new_saved_itinerary, которая содержит этот идентификатор.

Я динамически создаю div с этим идентификатором, и в той же функции я хочу что-то сделать, когда пользователь на него нависает. Тем не менее, я хочу только привязать эту функцию к элементу один раз, если элемент уже связан с событием, я ничего не хочу делать.

Подобный вопрос был отправлен здесь: как проверить, связано ли событие click - JQuery

Кто-то рекомендовал сначала установить класс CSS, и функция не запускается, если класс CSS уже существует. Это то, что я пробовал, но он не работает:

$('div[data-id="' + newly_saved_itinerary + '"]:not(.hover_bound)').addClass('hover_bound').bind({
    mouseenter: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    },
    mouseleave: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    }
});

Обновить:

Я попытался использовать ОДИН, как кто-то предложил, но это не помогло. Моя проблема заключается в том, что я создаю несколько элементов с помощью этой функции, и, кажется, каждый раз они перепроверяют их все, вместо того, чтобы связывать их только один элемент. Это то, что я пробовал сейчас и после 2-3 зависаний, он вообще не переключается:

$('div[data-id="' + newly_saved_itinerary + '"]').one({
    mouseenter: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    },
    mouseleave: function (e) {
        $('div[data-id="' + newly_saved_itinerary + '"] > .it-bar-buttons').fadeToggle();
    }
});

Zannix 20 янв. 2014, в 17:26

Источник

1

сделать скрипку ..
Tushar Gupta - curioustushar 20 янв. 2014, в 16:11
0

Вопрос все еще немного сбивает с толку: хотите ли вы связать событие и повторно использовать его всякий раз, когда пользователь наводит на него курсор, или вы просто хотите связать его для выполнения только один раз?
code-jaff 20 янв. 2014, в 16:29

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Вопрос все еще немного сбивает с толку: хотите ли вы связать событие и повторно использовать его всякий раз, когда пользователь наводит на него курсор, или вы просто хотите связать его для выполнения только один раз?

jvicab · Answer 1 · 2014-01-20T14-27-00.000Z

Вы должны привязать четный обработчик к родительскому элементу, к которому вы динамически добавляете div, например:

$('div-parent').on('hover', 'div-inserted', function(){
    // handler code here
});

первым параметром "on" является тип события, второй - это ссылка на дочерний элемент, к которому этот обработчик привязан, а третья - функция обратного вызова, которая будет выполняться при запуске события.

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

Tushar Gupta · Answer 2 · 2014-01-20T14-36-00.000Z

Использовать .one()

Прикрепите обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события.

$('div[data-id="' + newly_saved_itinerary + '"]').one('hover', function () {
    //code
}, function () {
    //code
});

эй, я обновил свой вопрос, пожалуйста, смотрите