jQuery Событие Bubbling, live(), событие click, не распространяемое

У меня есть два контейнера, один из которых не сгенерирован до загрузки страницы. Первый, сгенерированный последним (<div class=last></div>), должен появиться над первым. Визуально он закрывает первый. Однако я не могу заставить «.last» отвечать на событие live() click. Он будет отвечать на первый div, но не на последний div (опять же, div, который визуально отображается на переднем плане). Это сводит меня с ума, на странице нет других событий кликов. Чтобы было ясно, вот моя страница:jQuery Событие Bubbling, live(), событие click, не распространяемое

<body> 
<div class="first">First div</div> 
<script type="text/javascript"> 
// This works 
$('body').append($('<div/>').addClass('last').text('last div')); 
//This does not 
$('.last').live('click', function(e) { 
     alert('hello'); 
}); 
</script> 
</body>

Если я заменить «.last» с «.first» она работает, у меня нет никаких других событий щелчка, так что я не понимаю, почему распространение следует прекратить. Я даже назначил z-index: -1 для последнего. Это должно быть невероятно просто, любые идеи?

CSS для Last Div:

-moz-box-shadow:0 4px 10px 0 #8B8B8B; 
background-color:white; 
cursor:default; 
margin:0 0 0 2px; 
padding:4px 0; 
position:absolute;

Первый ДИВ, без CSS.

Редактировать: мой DOM структурирован немного сложнее, чем пример выше. Я уверен, что div «последний» виден и сверху. Вот фактическая DOM структура проекта:

<div> 
<button> (when button is pressed last is created) 
    <span> 
    <div> 
    <div class="last"></div> 
    </div> 
    </button> 
</div> 
<table> 
    <thead> 
    <tr> 
    <td><div class="first"></div></td> 
    </tr> 
    </thead> 
</table>

Я считаю, что я понял это и не понимал этого, пока я не отправил все мое дерево. Мне так глупо. «Кнопка» div останавливала распространение, поскольку к нему прикреплялось событие jquery-ui. По какой-либо причине Chrome и Firefox не отображают изменение состояния (т. Е. Показывая кнопку нажатой). Это происходит потому, что «последний» div не находится на кнопке и под ней. Однако, что касается событий, он остановился на кнопке. IE8, как ни странно, покажет, что кнопка нажата (запуск события), что приводит к осознанию того, что это ошибка. Я полностью забыл, что jQuery-UI был подключен к кнопке, и это может показать и div и не показывать его. Перемещение div вне кнопки решило проблему.

Было бы очень приятно, если бы у jQuery был какой-то живой журнал, где вы видите весь пузырь событий вверх.

источник

2010-07-22 KieselguhrKid

Можете ли вы разместить css, который позиционирует divs? – sje397

попробуйте сделать абсолютный div 'left: 0',' top: 0' и более высокий 'z-index', а затем' position: relative' на родительском элементе этого абсолютного div .. – Reigel

Вы должны иметь котировки вокруг body в блоке $(body), потому что нет переменной с именем body.

$('body').append($('<div/>').addClass('last').text('last div'));

источник

2010-07-22 02:34:41 EndangeredMassa

Это было неаккуратное редактирование на моя часть, я не доказал, что прочитал код в разделе «This works». Спасибо, что указали это. – KieselguhrKid

Ох, хм. Кажется, это работает для меня иначе. – EndangeredMassa

Правда, похоже, он работает. Я попытался дублировать вашу проблему и не смог: http://jsfiddle.net/nfYsu/. @KieselguhrKid Есть ли что-то еще, что вы оставляете, что может вызвать эту проблему? – karim79

что .live() должен работать ...

попробуйте добавить рамку к этому div и увидеть, что если div действительно есть ...

вы пробовали .delegate()?

$('body').delegate('.last', 'click', function(){ 
    alert('hello') 
});

источник

2010-07-22 02:47:28 Reigel

jQuery Событие Bubbling, live(), событие click, не распространяемое

ответ

Смежные вопросы