[javascript] 자손의 이벤트 리스너를 파괴하지 않고 innerHTML에 추가 할 수 있습니까?

다음 예제 코드에서는 onclick“foo”라는 텍스트가 포함 된 범위에 이벤트 핸들러를 연결합니다 . 핸들러는 alert().

그러나 부모 노드의에 할당하면 innerHTML이 onclick이벤트 핸들러가 파괴됩니다. “foo”를 클릭하면 경고 상자가 표시되지 않습니다.

이 문제를 해결할 수 있습니까?

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

답변

안타깝게도에 할당 innerHTML하면 추가하려는 경우에도 모든 자식 요소가 파괴됩니다. 자식 노드 (및 해당 이벤트 처리기)를 보존하려면 DOM 함수 를 사용해야 합니다 .

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

편집 : 의견에서 Bob의 솔루션. 답을 게시하세요, 밥! 그것에 대한 신용을 얻으십시오. 🙂

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

답변

사용하면 .insertAdjacentHTML()이벤트 리스너가 유지 되며 모든 주요 브라우저에서 지원됩니다 . .NET의 간단한 한 줄 대체입니다 .innerHTML.

var html_to_insert = "<p>New paragraph</p>";

// with .innerHTML, destroys event listeners
document.getElementById('mydiv').innerHTML += html_to_insert;

// with .insertAdjacentHTML, preserves event listeners
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);

'beforeend'요소에 인수 지정은 HTML 콘텐츠를 삽입합니다. 옵션은 'beforebegin', 'afterbegin', 'beforeend',와 'afterend'. 해당 위치는 다음과 같습니다.

<!-- beforebegin -->
<div id="mydiv">
  <!-- afterbegin -->
  <p>Existing content in #mydiv</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

답변

이제 2012 년이되었습니다. jQuery는이를 정확히 수행하는 추가 및 앞에 추가 기능을 가지고 있으며 현재 콘텐츠에 영향을주지 않고 콘텐츠를 추가합니다. 굉장히 유용하다.

답변

약간의 (하지만 관련이있는) 제쳐두고, jquery (v1.3)와 같은 자바 스크립트 라이브러리를 사용하여 dom 조작을 수행하는 경우 라이브 이벤트를 사용하여 다음과 같은 핸들러를 설정할 수 있습니다.

 $("#myspan").live("click", function(){
  alert('hi');
});

모든 종류의 jquery 조작 중에 항상 해당 선택기에 적용됩니다. 라이브 이벤트를 참조하십시오 : docs.jquery.com/events/live JQuery와 조작은 다음을 참조하십시오 docs.jquery.com/manipulation를

답변

코드가 적고 멋진 dom 항목으로 작업하는 것보다 읽기가 쉽기 때문에 문자열로 삽입 할 마크 업을 만들었습니다.

그런 다음 해당 요소의 유일한 자식을 가져와 본문에 첨부 할 수 있도록 임시 요소의 innerHTML을 만들었습니다.

var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);

답변

something.innerHTML + = ‘원하는대로 추가’;

그것은 나를 위해 일했습니다. 이 솔루션을 사용하여 입력 텍스트에 버튼을 추가했습니다.

답변

또 다른 대안이 있습니다 setAttribute. 이벤트 리스너를 추가하는 대신 사용 하는 것입니다. 이렇게 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo innerHTML and event listeners</title>
<style>
    div {
        border: 1px solid black;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>
        <span>Click here.</span>
    </div>
    <script>
        document.querySelector('span').setAttribute("onclick","alert('Hi.')");
        document.querySelector('div').innerHTML += ' Added text.';
    </script>
</body>
</html>

스 니펫 확장