Вопрос по jquery, javascript – не уверен насчет метода .on ()

5

Я использовал$.click() метод для запуска некоторых событий. Но затем мне нужно было установить некоторые события для некоторых элементов HTML, прежде чем элементы были объявлены. Давайте возьмем это в качестве примера:

<script>
    $('div.hide').click(function() {
        $('div.hide').css({'display' : 'none'});
     });
</script>
<div class="hide">some text</div>

Недостатком является то, что при настройке.click() метод,div.hide элементы не существуют, поэтому триггер не установлен.

Поэтому я обратился к.on() метод, вот так:

<script>
    $('div.hide').on('click', function() {
        $('div.hide').css({'display' : 'none'});
    });
</script>
<div class="hide">some text</div>

Но это также не работает. Я думал звоню.on() сделает все существующее и будущееdiv.hide элементы вызывают'click' function().

Мне удалось преодолеть это неудобство, но, насколько я знаю, мне бы хотелось узнать, что я делаю неправильно. Нет ли способа назначить триггер для будущих элементов HTML?

Моим решением было:

<script>
    $(document).ready( function() {
        $('div.hide').click(function() {
            $('div.hide').css({'display' : 'none'});
        });
    });
</script>
<div class="hide">some text</div>
Примечание о$(document).ready( function() { }); Оболочка, которая добавляет обработчик события для события готовности документа, так что код внутри не будет выполняться, пока не сработает это событие. Это обеспечивает полную визуализацию страницы перед запуском скрипта, в отличие от случая, когда JavaScript анализирует и запускает во время рендеринга страницы в противном случае. Mark Schultheiss

Ваш Ответ

2   ответа
-2

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

& Quot; .on () & quot; метод, представленный в версии 1.7, заменяет & quot; .live () & quot; метод. Действительно, ".live ()" сама по себе была заменена на ".delegate ()" некоторое время назад.
10

$('body').on('click', 'div.hide', function() { ... });

Это ставит обработчик на<body> но он ловит всплывающие события и вызывает обработчик, когда целевой элемент соответствует селектору (второй аргумент).

Обработчик не должен идти на<body>; это может быть любой родительский элемент контейнера вашего<div>.

& Quot; на & quot; метод заменяет старый «живой» и & quot; делегировать & quot; методы, а также "связать" сам.

@MaratTanalin well & quot; .live () & quot; помещает обработчик в<body> тоже - это на самом деле не "пустышка" элемент; это точка в DOM, в которой всплывающие события должны быть перехвачены. Проблема с & quot; .live () & quot; в том, что для поиска селектора требуется DOM.
Я думаю, что важным моментом здесь является то, что ему нужно куда-то прикрепить событие, и наиболее близкое возможное место в DOM - это идеальное / лучшее место, поэтому лучше всего использовать DIV с идентификатором, в который вставляются несуществующие элементы. +1 за это - поскольку OP, кажется, НЕ понимает, что присоединение к несуществующему элементу все еще НЕ присоединяется.
@ T.J.Crowder да, я действительно не понимаю, в чем дело.
Нет, & quot; .on () & quot; не требует поиска DOM для селектора совпадений. Для каждого события селектор применяется только к целевому элементу события. Конечно, в DOM необходимо искать элемент обработчика, но, например, если создается обработчик для кликов по<td> это намного дороже с ".live ()" чем с ".on ()".
Библиотека не может этого сделать, потому что она не может точно знать, что это то, чего я ожидаю. Я могу бытьconditionally привязывать обработчик событий, который я не могу связать позже при других условиях.

Похожие вопросы