Блог

Главная - Вопросы по программированию - Методы jQuery 1.7 on () и off () для динамических элементов

Методы jQuery 1.7 on () и off () для динамических элементов

#jquery #jquery-1.7

#jquery #jquery-1.7

Вопрос:

.on() И .off() методы jQuery 1.7 должны заменять .live() и тому подобное.

Я попробовал это с динамическим элементом:

  $(".myList").on('click', function(e){
  alert('hello world');
 });

У меня это не работает для элементов, добавленных после загрузки DOM.

Является ли приведенный выше код допустимым примером для .on() и .off() методов jQuery 1.7?

Ответ №1:

Смотрите http://blog.jquery.com/2011/11/03/jquery-1-7-released / для live() -> on / off() (и других) примеров.

Это их пример преобразования live в on:

 $('a').live('click', fn);
$(document).on('click', 'a', fn);

Итак, ваш пример становится:

 $(document).on('click', '.myList', function(e){
  alert('hello world');
});

Комментарии:

1. Однако следует кое-что понять. on () не работает с динамически создаваемыми элементами, которые добавляются к телу и имеют отрицательный z-индекс. По какой-либо причине щелчок никогда не проходит мимо тела, содержащего элемент. Тег body будет продолжать фиксировать все нажатия. Даже если вы сделаете тело с индексом z ниже, чем у элемента, добавляемого в DOM. ОДНАКО live () ОБЛАДАЕТ способностью нацеливаться на эти элементы с отрицательной индексацией, хотя on () не может.

2. @Alex зачем вам нужно динамически создавать элементы с отрицательным z-индексом?

3. и самое главное, начиная с версии jQuery 1.9.0 — метод live() больше не доступен.

Ответ №2:

Вот небольшой пример:

http://jsfiddle.net/zzSjK/

 <script type="text/javascript">
    $(function(){
        $(document).on('click','.clickme' , function(e){
          addtext()
        });
        function addtext() {
            $('.myList').append('<div class="clickme">click me</div>')
        }
    })
</script>

<div class="myList">
    <div class="clickme">-click-</div>
</div>

Ответ №3:

«Привязать» с помощью:

 $(document).on('click','.myDiv',function(){ ... });

И «отвязать» с помощью:

 $(document).off('click','.myDiv');