JQuery Event Bubbling, live(), событие клика не распространяется

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

<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 для последнего Div:

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

Первый div, без 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 был какой-то журнал в реальном времени, где вы видите все всплывающее вверх всплывающее окно событий.


javascript jquery jquery-events
person KieselguhrKid    schedule 22.07.2010    source источник
comment
Можете ли вы опубликовать css, который позиционирует div?   -  person sje397    schedule 22.07.2010
comment
попробуйте сделать абсолютный div left:0, top:0 и более высокий z-index , затем position:relative на родительском элементе этого абсолютного div..   -  person Reigel    schedule 22.07.2010

Ответы (2)


arrow_upward
2
arrow_downward

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

$('body').append($('<div/>').addClass('last').text('last div'));
person EndangeredMassa    schedule 22.07.2010
comment
Это было небрежное редактирование с моей стороны, я не проверял код в разделе «Эти работы». Спасибо, что указали на это. - person KieselguhrKid; 22.07.2010
comment
Правда, вроде работает. Я попытался воспроизвести вашу проблему и не смог: jsfiddle.net/nfYsu. @KieselguhrKid Есть ли что-то еще, что вы упускаете из виду, что может быть причиной этой проблемы? - person karim79; 22.07.2010

arrow_upward
1
arrow_downward

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

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

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

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