VPF::jQuery 1.9.1 событие .on() и делегирование

Leshak

Дата 15.4.2013, 12:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

При переходе на jQuery 1.9.1 пришлось заменить обработчик .live() на .on()
и возникла следующая ошибка:

Было так:

Код

$('#outRes.midl img').live( 'mouseover', function(){...});

- когда родительский блок #outRes был оформлен стилем .midl
и курсор проходит над превью картинки - она показывается крупно,
при оформлении другими стилями - это событие не возникает.

Код

$('#outRes.midl').on( 'mouseover', 'img', function(){...});

- теперь событие возникает всегда, независимо от стиля блока #outRes

Помогите пожалуйста разобраться - как правильно назначить событие?

ksnk

Дата 15.4.2013, 14:44 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

.on не является эквивалентной заменой live. Это обычный обработчик сообщений, выставляемый один раз. Просто по событию проверяется селектор объекта, вызвавшего событие и обработчик тикает или нет.
.live срабатывает всегда при модификации контента объекта. Отказываются от live из-за больших накладных расходов на его поддержку.
Надеюсь, понятно почему "новый" обработчик работает не так как работал старый?

Вероятно, сработает такой код:

Код


$('#outRes').on( 'mouseover', '.midl img', function(){...});

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Leshak

Дата 15.4.2013, 15:15 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

В теории мне это понятно
но на практике - что-то не очень...

Ведь даже этот вариант:

Цитата(ksnk @ 15.4.2013, 14:44

)

Вероятно, сработает такой код:

Код

$('#outRes').on( 'mouseover', '.midl img', function(){...});

совершенно правильно все отрабатывает в jQuery 1.7.1
а в jQuery 1.9.1 - обработчик вообще не срабатывает :(

ksnk

Дата 16.4.2013, 09:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Можно вложить минимальный пример на jsFiddle? Ajax эмулировать кнопкой, по которой менять сдержимое дива...

Добавлено @ 09:32
Кстати - да. Если поменять версию jQuery на 1.7 - все работает. А на 1.9.1 - нет. В чем может быть дело?

Это сообщение отредактировал(а) ksnk - 16.4.2013, 09:32

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Leshak

Дата 16.4.2013, 11:09 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Большое спасибо за http://jsfiddle.net/ScBrk/ !!!
// прям хоть высматривай по всему форуму Ваши сообщения - вдруг где еще какая вкусность попадется...

Цитата(ksnk @ 16.4.2013, 09:19

)

Кстати - да. Если поменять версию jQuery на 1.7 - все работает. А на 1.9.1 - нет. В чем может быть дело?

в поисках этой непонятки сделал отдельный пример - может кому интересно будет разобраться?

Код



<!DOCTYPE HTML>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"!>
    <title> TEST: .on() </title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script -->

</head>
<body >
    <div id="db" class="a" >
        <div class="d" chk="#911" >#911</div>
        <div class="d" chk="#191" >#191</div>
        <div class="d" chk="#119" >#119</div>
        <hr>
        <div class="c" chk="a" >нажать для смены класса <br> class a / class b</div>
    </div>
</body>

<script language="JavaScript">

    

$( function() {
    ( function(){
        $('#db').on( 'click', ".c", function(){ 
            $(this).toggleClass("cc");    
            $("#db").toggleClass("a").toggleClass("b");    
                
        });

        $('#db').on( 'mouseover', ".a .d", function(){ 
                $("#db").css("background-color", $(this).attr("chk") );
        }).on( 'mouseout', '.a .d', function(){ 
                $("#db").css("background-color", "#777");
        });
    })();    
}); 
    
</script> 

<style>
#db {
    display: block;
    position: absolute;
    top: 90px;
    left: 90px;
    width: 555px;
    height: 222px;
    z-index: 0;
    background-color: #777;
    padding-top: 11px;
}

#db.a {    border: solid 22px #777; }

#db.b {    border: solid 22px #333; }

.d, .c {
    display: inline-block;
    text-align: center;
    background-color: #fff;
    padding: 11px;
    cursor: pointer;
}
.d {
    margin: 11px 24px;
    width: 111px;
    height: 44px;
    font-size: 33px;
    line-height: 44px;
}

.c {
    margin: 15px 99px;
    height: 55px;
    width: 333px;
    font-size: 22px;
    line-height: 28px;
}

.cc { background-color: #cfc; }

</style>
</html>

sQu1rr

Дата 16.4.2013, 13:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

Код


$('#db').on( 'mouseover', ".a .d", function(){ 
    $("#db").css("background-color", $(this).attr("chk") );
}).on( 'mouseout', '.a .d', function(){ 
    $("#db").css("background-color", "#777");
});

второй аргумент: селектор, он ищет (.a .d) внутри #db, разумеется (.a .d) там нету, ведь .a это класс #db
проблема в том, что вы привязываете листнер к #db, и .on в дальнейшем не проверяет, изменился ли объект, так что даже код

Код


$('#db.a').on( 'mouseover', ".d", function(){ 
    $("#db").css("background-color", $(this).attr("chk") );
}).on( 'mouseout', '.d', function(){ 
    $("#db").css("background-color", "#777");
});

будет выполняться всегда (в случае live он бы работал, возможно немного пришлось бы поправить, я уже не помню как Live должен выглядеть). мой совет, сделайте проверку условия if($("#db").hasClass('a')) и тогда выполняйте функцию

Код


$('#db').on( 'mouseover', ".d", function(){
    if($("#db").hasClass('a'))
        $("#db").css("background-color", $(this).attr("chk") );
}).on( 'mouseout', '.d', function(){ 
    if($("#db").hasClass('a'))
        $("#db").css("background-color", "#777");
});

или второй вариант, атачте ивент к родителю, в данном примере к body

Код


$('body').on( 'mouseover', "#db.a .d", function(){
    $("#db").css("background-color", $(this).attr("chk") );
}).on( 'mouseout', '#db.a .d', function(){ 
    $("#db").css("background-color", "#777");
});

Это сообщение отредактировал(а) sQu1rr - 16.4.2013, 13:45

sQu1rr

Дата 16.4.2013, 13:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

кстати говоря, (насколько я понимаю) когда вы используете $('body').on(event, selector, ...) это эквивалентно $(selector).live(event, ...), .on позваляет остановить делегирование ниже body поэтому live заменили на .on (более гибкая настройка)

Leshak

Дата 16.4.2013, 14:16 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Цитата(sQu1rr @ 16.4.2013, 13:33

)

if ( $( "#db" ).hasClass( 'a' ) )

Да - это работает!  Фильтруем нужное состояние... но это  заплатка...
Хочется понять - почему такое потребовалось устроить в 1.9.1 ???

$('#db').on( 'mouseover', "#db.a .d", function(){  ... });
работает ожидаемо  в 1.7.1 ,но не в 1.9.1, потому как аналогично:

Цитата(sQu1rr @ 16.4.2013, 13:33

)

второй аргумент: селектор, он ищет (.a .d) внутри #db, разумеется (.a .d) там нету, ведь .a это класс #db

внутри #db, разумеется нету (#db.a .d)...

Цитата(sQu1rr @ 16.4.2013, 13:49

)

кстати говоря, (насколько я понимаю) когда вы используете $('body').on(event, selector, ...) это эквивалентно $(selector).live(event, ...), .on

эволюция была такова

Код


        $('#db.a .d').live( 'mouseover', function(){ ... });    //     работал ожидаемо
        $('#db.a').on( 'mouseover', '.d', function(){ ... });    //  НЕ работает ожидаемо
        $('#db').on( 'mouseover', ".a .d", function(){ ... });    //     работает ожидаемо  в 1.7.1 ,но не в 1.9.1

Добавлено через 3 минуты и 37 секунд
офф...топикс

кажется мне, что jQuery 2.x - это уже что-то по мотивам jQuery 1.x
настолько далекий потомок, что можно даже и не узнать...

smile

sQu1rr

Дата 16.4.2013, 14:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

Цитата(Leshak @ 16.4.2013, 14:16

)

$('#db').on( 'mouseover', "#db.a .d", function(){ ... });
работает ожидаемо в 1.7.1 ,но не в 1.9.1,

Цитата(Leshak @ 16.4.2013, 14:16

)

внутри #db, разумеется нету (#db.a .d)...

Цитата

selector
Type: String
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

Не знаю, почему это работает в 1.7.1, не довелось проверить, но в документации ясно сказано, селектор смотрит только элементы потомков. В моем коде я прикрепляю ивент к родителю и все работает.
Возможно d 1.7.1 применялись глобальные селекторы а в 1.9.1 локальные, кто знает

Ух, нашел
http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/

Цитата

#12383: jQuery.on() selector should only apply to descendants of the element

Как видите, в 1.8.1 пофиксили, так что это 1.7.1 работал не так как надо

Это сообщение отредактировал(а) sQu1rr - 16.4.2013, 15:06

Leshak

Дата 16.4.2013, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Цитата(sQu1rr @ 16.4.2013, 14:51

)

Как видите, в 1.8.1 пофиксили, так что это 1.7.1 работал не так как надо

Ну вот и все - Работало по ошибке!

Спасибо за объяснение!

и простите - по незнанию английского мне не понять документацию...

sQu1rr

Дата 16.4.2013, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

Цитата(Leshak @ 16.4.2013, 15:38

)

и простите - по незнанию английского мне не понять документацию...

http://jquery.page2page.ru/index.php5/On - скудная документация конечно, но хоть что-то smile

Нету самого главного - комментариев

Цитата(Leshak @ 16.4.2013, 15:38

)

Ну вот и все

Помечайте тогда как решенный smile

sQu1rr

Дата 19.4.2013, 20:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

Цитата(Leshak @ 16.4.2013, 14:16

)

кажется мне, что jQuery 2.x - это уже что-то по мотивам jQuery 1.x
настолько далекий потомок, что можно даже и не узнать...

Насколько я понял 2.x это тотже 1.9.x только без поддержки IE6/7/8

Цитата

jQuery 2.0 is API-compatible with 1.9, which means that all of the changes documented in the jQuery 1.9 Upgrade Guide have been applied to jQuery 2.0 as well.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »