2012-11-01 3 views
0

약 4 시간 동안 벽에 머리를 부딪 히고 있습니다. 왜 이렇게 작동하지 않는지 알아 내려고합니다. SQL 쿼리 결과의 수에 따라 코드를 동적으로 작성해야하는 프로그램이 있습니다.동적으로 작성된 스크립트가 작동하지 않습니다.

EasyBox라는 jquery 라이트 박스를 사용하고 있습니다. 이 같은 하드 코딩되면 작동합니다

<body id="body" onload="bodyLoaded()"> 
<a id="link" href="#test" title="Snowflake" rel="lightbox">Hello</a> 
<div id="test" style="display:none; width:320px; height:240px"> 
    <p>Test Content</p> 
</div>  
<script type="text/javascript"> 
    function bodyLoaded(){ 
     $('#link').attr('onclick', 'logText("Hello")'); 
    } 
    function logText(message){ 
     console.log(message); 
    } 
</script> 

을 그러나, 나는 동적으로이 같은 기록 된 링크가 때 EasyBox 팝업이 발생하지 않습니다.

<body id="body" onload="bodyLoaded()"> 
<div id="test" style="display:none; width:320px; height:240px"> 
    <p>Test Content</p> 
</div> 
<script type="text/javascript"> 
    function bodyLoaded(){ 
     document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>"; 
     $('#link').attr('onclick', 'logText("Hello")'); 
    } 
    function logText(message){ 
     console.log(message); 
    } 
</script> 

이 작업을하는 이유가 뭘까요? 나는 여기에서 내 머리카락을 당길거야!

+1

당신은 onload와 dom-ready의 차이점을 알고 있습니까? –

+1

문제가 보이지 않습니다. 두 번째 스크립트 블록을 테스트 페이지로 복사했는데 제대로 작동합니다. 콘솔에 "Hello"를 기록합니다. – ajtrichards

답변

2

jQuery를 왜이 용도로 사용하고 있는지 이해할 수 없습니다.

$(function(){ 
    $('#body').prepend("<a id='link' href='#test' rel='lightbox'>Hello</a>"); 
    $('#link').click(function(){ 
     alert("Hello"); 
    }); 
}); 

.click()이 작동하지 않으면 .live()를 시도 할 수도 있습니다. 둘 다 jsfiddle (http://jsfiddle.net/LZxrL/ 및 http://jsfiddle.net/LZxrL/1/)에서 나를 위해 일했습니다.

또한 body 요소 자체의 ID가 'body'인 경우 모두 id = 'body'가없는 요소가 계속 표시됩니다. 분명히 그는 몸에 링크를 추가하려고합니다.

편집 : 라이트 박스가 아닌 click 이벤트에 관한 다른 게시물에 대한 귀하의 의견을 읽었습니다. 그것은 변화를 일으 킵니다. 필자는 그 플러그인으로 정식으로 논평 할 수는 없지만, 페이지가로드 될 때 플러그인이 rel = "lightbox"를 찾았고 이후에 추가 된 요소는 잡히지 않을 것이라고 의심된다. 대부분의 플러그인에는 다음과 같은 수동 방법이 있습니다.

$('#link').lightbox(); 
+0

. 나는 rel = "lightbox"라는 페이지에 숨겨진 링크를 만들어서 EasyBox가 알아 차렸습니다. 그런 다음 원하는 위치에 따라 링크의 href를 변경 한 다음 jquery를 통해 링크를 트리거했습니다. 그것은 예쁘지 않지만 작동합니다. –

-1

스크립트에서 동적 태그를로드하는 위치가 표시되지 않습니다. bodyLoaded() 함수는 id = 'body'가있는 항목을 찾고 두 번째 코드 블록에서는 해당 id 태그가 보이지 않습니다.

+0

첫 줄을보세요 :' 또한 7 행을보세요 : document.getElementById ('body'). innerHTML + = "Hello"; ' –