2011-08-25 5 views
1

내가 마지막 문단 위에 마우스를 할 때 나는 내가 그것을 조금

<body> 
<h4><i>More</i> Mitch Hedberg Quotes</h4> 
<div> 
    <input type='submit' id='tmpQuote1' value='View Quote' /> 
</div> 
<div> 
    <input type='submit' id='tmpQuote2' value='View Quote' /> 
</div> 
<div> 
<p id="paragraph"> some text that will disappear</p> 
</div> 

$(document).ready(
function() { 
$('p').mouseover(
function(){ 
$(this).replaceWith("<p> the text changed to this text </p>"); 
} 
); 

$('input#tmpQuote1').click(
    function($e) { 
    $e.preventDefault(); 

    $(this).replaceWith(
     "<p>\n" + 
     " I would imagine that if you could understand \n" + 
     " Morse code, a tap dancer would drive you crazy.\n" + 
     "</p>\n" 
    ); 
    } 
); 

$('input#tmpQuote2').click(
    function($e) { 
    $e.preventDefault(); 

    $(this).replaceWith(
     "<p>\n" + 
     " I'd like to get four people who do cart wheels \n" + 
     " very good, and make a cart.\n" + 
     "</p>\n" 
    ); 
    } 
); 

을 수정 jQuery를 배우고 사용하고 책에서이 HTML 코드는 기본적으로 텍스트를 변경있어 . 두 버튼을 클릭하면 문단 + 텍스트로 바뀝니다. 지금까지 그렇게 좋았습니다. 그러나 내가 가지고있는 문제는 첫 번째 & (새로 스폰 된) 단락 위로 마우스를 가져 가면 마우스 오버가 작동하지 않는 이유를 이해하는 것입니다. Jquery 파서에 지연이 있습니까? 아니면 정확히 어떻게 작동하는지 모르겠습니다.

감사합니다.

답변

0

.click.live('click',function(){...});으로 변경하면 문제가 없습니다. 그 이유는 위에서 설명한 바와 같습니다. 이벤트 처리기는 이미있는 컨텐트에만 추가됩니다. 동적으로 추가하는 모든 콘텐츠에 추가하려면 .live을 사용해야합니다.

+0

감사합니다. – Marin

0

작성한 기능은 문서 작성시 작성된 모든 오브젝트에만 적용됩니다. 나중에 생성 된 항목, 즉 동적으로 추가 된 항목은 이러한 이벤트 처리기를 가져 오지 않습니다. click() jquery function not available on new divs

는 기본적으로,이 문제를 해결하려면이 문제를 해결할 수 JQuery와 delegate 기능을 사용해야합니다

또한이 질문을 참조하십시오.

이벤트 처리기가 새로운 <p>의 클릭 이벤트에 가입하지 않기 때문에

+0

의견을 주셔서 감사합니다. 그렇다면 jQuery를 사용하여 동적으로 추가 된 요소에 액세스 할 수 있습니까? – Marin

+0

.live() 대신 –

+0

을 사용하십시오. 다음 내용을 읽어야합니다. http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate – Nayish

0

이것은 (deligate()하지 live() 이유에 대한 설명은 여기를 참조하십시오). 문서에 문서를 추가 한 후 수동으로 이벤트 처리기를 설정하거나 .live('click', function...) 또는 더 나은 jQuery.livequery 플러그인을 사용해야합니다.

관련 문제