마우스 트리거가 제대로 HTML이 코드에 대한 JQuery와

Question

을 통해 만든 경우 발생하지 : 왜 HTML의 기존 된 DIV도 따라서 경고 마우스를 트리거 할

<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'); 
    } 
); 


}); 

---

하지만, appeneded DIV는 죽지 않을 것이다. 추가 된 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'); 
} 
); 

참고 : 요약에이 솔루션을했다.

Answer 1

현재 코드에서 결과로 생성 된 XHTML이다.

시도 :

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

이제 첨부 된 message 클래스로 새로운 div 내부의 텍스트를 볼 수 있습니다.

Answer 2

텍스트를 추가하고 나중에 선택할 수있는 DOM 개체를 만들지 않기 때문에 작동하지 않습니다.

당신은 아마 그런 짓을해야합니다

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

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

Answer 3

귀하의 코드는 실제로 파이어 폭스에서 나를 위해 완벽하게 작동, 그래서 그것을 다른 뭔가 그게 문제입니다해야합니다 생각합니다. 그밖에 영향을 줄 수 있다고 생각되는 것이 있습니까? 당신이 볼 수 있듯이, 당신이 위로 마우스를 가져 것으로 예상되는 부분은 텍스트가 없습니다

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

: 여기