jquery .live () события взаимодействия - PullRequest
Новая
       9

jquery .live () события взаимодействия

5 голосов
/ 09 марта 2010

Допустим, у меня есть сценарий, в котором у меня есть глобальный плагин (или, по крайней мере, плагин, который связывается с более широким массивом событий).

Этот плагин берет селектор и привязывает к нему живой клик. Что-то в псевдо-jquery, которое может выглядеть так: 

$.fn.changeSomething = function(){
     $(this).live("change", function(){ alert("yo");});
}

На другой странице у меня есть дополнительная привязка в реальном времени, примерно такая: 

$("input[type='checkbox']").live("click", function(){alert("ho");});

В этом сценарии флажок в идеале должен быть связан с обоими живыми событиями.

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

Простой обходной путь - вызвать событие щелчка в конце обработчика изменений в реальном времени, но мне это кажется неоправданным. Есть идеи?

Обратите внимание, что это использует jquery 1.4.2 и происходит только в IE8 (я предположил, что 6/7 тоже, но я не проверял их).

пример (вам понадобится jquery-1.4.2.min.js): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.fn.changeSomething = function(){
        var t = $(this);
        t.live("change", function(){
            alert("yo");
        }); 
    };

    $(document).ready(function(){
    $("input[type='checkbox']").changeSomething();
    $("#special").live("click", function(){
      alert("ho");
    });
    });
</script>
</head>
<body>
<form>
  <input type="checkbox" id="cbx" />
  <input type="checkbox" id="special" />
  </form>
</body>
</html>

Ответы [ 3 ]

5 голосов
/ 09 марта 2010

Вы знаете, что IE не будет запускать событие "change", пока флажок не потеряет фокус, верно?

edit хотя я думаю, что это правда, эффект от этой тестовой страницы довольно странный. Я все еще играю с этим. «Живой» механизм сбивает меня с толку и заставляет меня немного нервничать, хотя я полностью понимаю его значение.

Я поднял (слегка измененную и уточненную) тестовую страницу: http://gutfullofbeer.net/clicks.html и собираюсь приступить к некоторой отладке jQuery

Сумеречная зона: Как отмечалось в комментариях, когда я связываю фиктивный обработчик "изменения" с элементом тела: 

$('body').bind('change', function() { return true; });

тогда все начинает работать нормально. Я уверен, что @Alex прав, что что-то происходит с тем, как jQuery пытается имитировать всплеск события «change». Тем не менее, жуткий, однако. Страница теста находится по адресу http://gutfullofbeer.net/clicks-body.html, и вы можете увидеть странность, нажав «Сначала установить с помощью обработчика изменений», затем установите флажки и обратите внимание, что обработчик «щелчка» на втором запускается только один раз, затем нажмите «Привязать обработчик к телу» и посмотреть, как ведут себя флажки после этого.

1 голос
/ 09 марта 2010

Попробуйте использовать $.delegate с общим предком вместо $.live

Ключ, который нужно запомнить с помощью live, заключается в том, что событие не связано с выбранным элементом. Он привязан к document и затем, когда событие всплывает в документе, он проверяет селектор, который вы передали для цели события.

Ключ к этому заключается в том, что в IE событие изменения естественно не всплывает, как в большинстве браузеров. В IE событие «всплывает» на основе эвристики, которая работает во всех тестах jquery так же, как и в других браузерах. Вероятно, в вашей другой функции есть что-то, что мешает этой эвристике работать. Так что имеет смысл, что это специфично для IE. Не то чтобы это хорошо ...

0 голосов
/ 19 ноября 2010

Вы можете использовать плагин jquery.livequery 

$("select[name='majorsList']").livequery("change",function()
{
alert('in');
});
...