Триггер мыши не происходит должным образом, если HTML создан с помощью JQuery

Question

для этого кода:

<div id="header">top of page</div>
<div class="message">hello, how are you</div>
<div class="message">I am fine</div>

---

$(document).ready(function()
  {

$("#header").append('<div class="message">appended DIV</div>');

$('div.message').hover(  
 function() {  
  alert('hi');
 },  
 function() {  
   alert('bye');
   }  
);


});

---

Почему существующие DIV в HTML вызывают даже мышь и, следовательно, оповещают, но добавленный DIV не будет и "мертв". Как присоединенный DIV может реагировать так же, как существующие?

спасибо.

---

изменить: в итоге это было решение:

$('<span />').addClass('message').text('(mouse 1)').appendTo('#header');
$('<span />').addClass('message').text('(mouse 2)').appendTo('#header');

$('.message').hover(  
 function() {  
    $('#header').prepend('in');
 },  
 function() {  
  $('#header').prepend('out');
 }  
);

Обратите внимание: если SPAN расположены под функцией наведения, она не будет работать.

Answer 1

Вот результирующий сгенерированный XHTML из вашего текущего кода:

<div id="header2">put mouse here<div class="message"></div></div>

Как вы можете видеть, часть, над которой вы собираетесь зависать, не имеет текста.

Попробуйте:

$('<div />').addClass('message').text('appended DIV').appendTo('#header');

Теперь вы увидите текст внутри нового div с прикрепленным классом message.

Answer 2

Это не работает, потому что таким образом вы добавляете текст, а не создаете объект DOM, который вы можете выбрать позже.

Вы, вероятно, должны сделать что-то вроде:

var divObj = $('<div>').attr('class', 'message');
$('#header').append(divObj);

$(divObj).hover(  
 function() {  
  alert('hi');
 },  
 function() {  
   alert('bye');
 }  
);

Answer 3

Ваш код на самом деле отлично работает для меня в Firefox, поэтому я думаю, что проблема в этом. Вы думаете, что-нибудь еще может повлиять на это?