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

StackOverflow https://stackoverflow.com/questions/2405483

Вопрос

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

Этот плагин принимает селектор и привязывает к нему живой клик.Что-то в псевдо-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>
Это было полезно?

Решение

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

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

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

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

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

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

Другие советы

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

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

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

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

$("select[name='majorsList']").livequery("change",function()
{
alert('in');
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top