JavaScript가 포함 된 추가 된 HTML은 실행되지 않습니다. 어떻게 실행할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/608034

문제

JavaScript가 포함 된 HTML을 추가하고 있습니다.

<td onclick="toggleDay('+data+',this,\'tue\');">T</td>

그리고

<img src="img/cross.png" onclick="deleteAlarm('+data+');">

이 두 코드는 내가 추가하는 많은 양의 HTML에 있습니다.

페이지가로드 될 때 이미 거기에 있지만 내가 추가 할 때는 그렇지 않을 때 이미 잘 작동합니다.

내가 무엇을 제안 하시겠습니까? Append 또는 후 JavaScript를 다시 해석하라는 DOM에 대한 일종의 종류의 요청이 필요합니까?

편집하다:

더 많은 정보 만으로도이 문제와 관련이 있습니다. 데이터베이스에 Ajax와 함께 물건을 추가하고 성공할 때 HTML을 필요한 위치에 추가하고 있습니다. 같은 방식은 댓글도 마찬가지입니다.

edit2 :

그것에 대한 모든 토론에도 불구하고 답변 해주셔서 감사합니다.

도움이 되었습니까?

해결책

나는 이것처럼 할 것이다 :

먼저 HTML에 ID 속성을 추가하십시오.

<td id="toggleDayCell">T</td>

<img src="img/cross.png" id="crossImg">

그런 다음 페이지의 Onload 이벤트에서 실행되는 JavaScript가 있고 관심있는 이벤트에 첨부하십시오.

~ 안에 프로토 타입, 다음과 같이 보일 수 있습니다.

Event.observe(window, 'load', function(){
  if( $('toggleDayCell') ) {
    Event.observe( $('toggleDayCell'), 'click', function(event){
      //do stuff here
    }
  }

  if( $('crossImg') ) {
    Event.observe( $('crossImg'), 'click', function(event) {
       //do stuff here
    }
  }
});

프로토 타입 (또는 jQuery)과 같은 것을 사용하는 것은 크로스 브라우저 호환성을 관리하기 때문에 좋습니다.

다른 팁

Ajax를 통해 HTML을 추가하고 있습니까? 그렇다면 반환중인 JavaScript를 수동으로 평가해야합니다. 당신은 div로 응답을 래핑하고 다음과 같은 일을 할 수 있습니다.

wrapper.getElementsByTagName("script")
// for script in wrapper...
eval(script.innerHTML)

프로토 타입과 같은 라이브러리를 사용하는 경우 evalscripts () 메소드에 대한 응답을 전달할 수 있으므로 훨씬 간단합니다.

html을 문서에 추가 한 다음 프로그래밍 방식으로 Onclick 이벤트를 객체에 추가하십시오.

이것은 내 머리 꼭대기에서 벗어나지 만 ... 이런 식으로 할 수 있다고 생각합니다.

즉:

Object.onclick = someFuntion

FF : 

Object.addEventListener('click', someFunction);

Ajax는 특히 약간의 단점이 있습니다. 예 : InnerHTML 속성을 사용하여 테이블 요소에 모든 것을 삽입/업데이트 할 수 없습니다. DOM 기능을 사용하여 요소 노드를 삽입/업데이트/삭제하는 것이 좋습니다 (또는 이벤트 처리기 추가). DOM 객체를 사용하여 문서를 수정하는 동적으로로드 된 JavaScript를 실행하기 위해 언급 된 Eval () 함수를 사용하여 동적으로로드 된 JavaScript를 실행할 수 있습니다.

너 ~해야 한다 사용하고 있습니다 addEventListener('click', /*...*/) innerhtml 또는 무엇이든 OnClick을 설정하는 대신.

즉, 전화 addEventListener 전적으로 다른 것이 있으므로이를 보상해야합니다.

(편집 : 즉, 그것을 호출합니다 attachEvent(). 이것이 약간 사용되기를 바랍니다.)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top