Javascript : Eventhandler가 작동하지 않습니다. JSFiddle에서 작동합니다.

게시 한 다른 질문에 대한 답변이며 정확한 해결책이라고 생각합니다. 그러나 jsfiddle에서 훌륭하게 작동하지만 환경 밖에서는 전혀 작동하지 않습니다. 여러 조합을 시도하고이 일을 올바르게 수행 할 수 없습니다.Javascript : Eventhandler가 작동하지 않습니다. JSFiddle에서 작동합니다.

본문에서 을 사용해 보았습니다. 기능을 둘러싼 헤더에서 모두 Window.onload을 시도하고 모든 요소가로드 된 후 페이지의베이스에서 별도로 호출했습니다. 아무것도 작동하지 않습니다. 난 항상이 문제를 얻을

: 내가 본이 오류에 대한 다른 모든 솔루션은 주위를 보장 중심으로 돌고 있기 때문에,

Uncaught TypeError: Cannot call method 'addEventListener' of null

실망 사실 할 핸들러가 HTML에서 떨어져 트리거 지정된 ID를 가지고 . 나도 그래.

나는 여기에 게시물을 올릴 과잉 공격을 안다. 그러나 나는 내 머리카락을 잡아 먹는다.

여기 JSfiddle입니다 : 여기 http://jsfiddle.net/fFW5r/1/

것 (작동하지 않음) 나 개념을 테스트하기 위해 만든 모형 페이지 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript"> 
    var link_container = document.getElementById('links'); 
    function myFunction(){ link_container.addEventListener('click', function(e){ 
     if(e.target.nodeName === "A"){ 
      var href = e.target.getAttribute('href'), 
       selfhost = window.location.hostname; 
      if(href.indexOf(selfhost) !== -1){ 
       alert('Inbound link clicked'); 
      } else { 
       alert('Outbound link clicked'); 
      } 
     } 
    }, false); 
    } 
</script> 
</head> 

<body onload="myFunction()"> 

<div id="links"> 
    <a href="http://fiddle.jshell.net/#foo">Inbound Link</a> 
    <a href="http://stackoverflow.com">Outbout Link</a> 
</div> 

<script>window.onload=myFunction()</script> 
</body> 
</html>

나는 onload 전화에서 그것을 테스트하기 위해 시도 된이 특정 반복 모든 것이로드 된 후 페이지 하단.

출처

2013-03-08 Michael Watson

var link_container = document.getElementById('links'); 필요는 그래서 myFunction

jsfiddle에서 코드가 기본적으로 load에서 실행되는 내부이어야한다 document.onload에서 실행합니다. no wrap - in head을 선택하면 왼쪽 패널> 두 번째 선택 상자의 바이올린에서 문제를 재현 할 수 있습니다. 데모 : Fiddle

<script type="text/javascript"> 

    function myFunction(){ 
     var link_container = document.getElementById('links'); // <<-- Move it inside `myFunction()` 
     link_container.addEventListener('click', function(e){ 
     if(e.target.nodeName === "A"){ 
      var href = e.target.getAttribute('href'), 
       selfhost = window.location.hostname; 
      if(href.indexOf(selfhost) !== -1){ 
       alert('Inbound link clicked'); 
      } else { 
       alert('Outbound link clicked'); 
      } 
     } 
    }, false); 

    } 
</script>

출처

2013-03-08 17:44:32

? 너희들이 그것을보고 "와우는 쉽다"라고 말할 줄 알았다. 수천 Arun에게 감사드립니다. 이제 답변을 받으려면 9 분을 기다려야합니다. –

스크립트를 실행할 때 요소가 아직 존재하지 않습니다. 위의 대답은 그것을 해결해야합니다. –

@MichaelWatson fiddle 재현 문제 http://jsfiddle.net/arunpjohny/fFW5r/3/ –

가 작동하지 않는 이유는 DOM이 준비되기 전에 link_container를 초기화하는 것입니다. 그런 다음 myFunction()을 실행하면 link_container가 undefined로 초기화됩니다. 어느 것이 실패 할까. 함수에서 초기화하면 (DOM을로드 한 후) 문제가 해결됩니다.

declare link_container를 함수에 넣습니다.

var link_container = document.getElementById('links'); 

function myFunction(){ 
    link_container.addEventListener('click', function(e){ 
     if(e.target.nodeName === "A"){ 
      var href = e.target.getAttribute('href'), 
       selfhost = window.location.hostname; 
      if(href.indexOf(selfhost) !== -1){ 
       alert('Inbound link clicked'); 
      } else { 
       alert('Outbound link clicked'); 
      } 
     } 
    }, false); 
}

출처

2013-03-08 17:47:27

Javascript : Eventhandler가 작동하지 않습니다. JSFiddle에서 작동합니다.

답변

관련 문제