자바 스크립트 : 미래의 이벤트 핸들러

Question

의 요소를 파괴하지 않고 HTML에서 문자열을 교체

나는 문자 (_aff.tractionsCode를) 주어진 문자열을 검색하여 다른 문자열 (tractionsId)과 같이으로 대체 코드가 있습니다

content = document.body.innerHTML.replace(_aff.tractionsCode, tractionsId); 
document.body.innerHTML = content; 

을

이 _aff.tractionsCode 그것은 교체해야

<div class="affiliate" rel="{tractionsCode}">{tractionsCode}</div> 

{tractionsCode}과 동일 가정 :

다음은 예입니다 {tractionsCode}의 두 인스턴스 모두

그러나 일단 문제가 발생하면로드 된 HTML이 대체되어 다른 자바 스크립트 이벤트 핸들러가 액세스 할 수 없거나 더 이상 제대로 작동하지 않을 수 있습니다.

html (rel과 같은 속성 포함)을 살펴보고 모든 html을 덮어 쓰지 않고 바꾸기를 실행할 수 있습니까?

아니면 더 좋은 방법이 있습니까?

도움 주셔서 감사합니다.

Answer 1

body의 innerHTML을 통해가는 것이 모든 것을 덮어 쓰게 될 것입니다. 바꿀 특정 텍스트 노드를 검색해야합니다.

뭔가 같은 ..

jQuery를에

document.getElementBy..('identifier').innerHTML 

,

$('.className').text('text to insert'); 

Answer 2

아야! 당신이하려고하는 것은 아마도 많은 작업과 노드 (요소가 아닌)를 반복하는 것이 가능할 것입니다 ...하지만 왜 귀찮게합니까? 이러한 작업은 DOM의 하위 영역에 지정된 템플릿과 위임을 사용하는 이벤트 핸들러의 조합으로 가장 쉽게 수행 할 수 있습니다.

JSRender (https://github.com/BorisMoore/jsrender)는 이전 jQuery 템플릿 플러그인 (https://github.com/jquery/jquery-tmpl)을 대체하지만 jquery-tmpl은 여전히 ​​오히려 쓸모있는 (나는 판도라가 여전히 그것을 사용한다고 믿는다). 당신은 자바 스크립트가 아닌 유형을 사용하여 스크립트 블록에서 템플릿을 저장하고 쉽게 렌더링 및 DOM의 특정 하위 섹션 교체 콘텐츠 당길 수 :

<script id="affiliateThing" type="text/x-jquery-tmpl"> 
<div class="affiliate" rel="${transactionsCode}">${transactionsCode}</div> 
</script> 
<script> 
    jQuery("#affiliateThing"). 
     tmpl([{'transactionsCode': 'wee'}]). 
     appendTo("#someElement"); 
</script> 

이 마크 업을 교체하는 것은 모든 이벤트 핸들러를 중단하지 않도록하기를, 부모 요소를 통해 이벤트를 위임해야합니다 :

jQuery("#someElement").on("click", ".affiliate", function(event){alert('wee');}); 

이 문장은 "#someElement"에 이벤트 처리기를 바인딩이 아닌 개별 ".affiliate"요소,하지만 사건 "는 유래 경우 핸들러를 발생 . 제휴 "요소.

즐기십시오!

편집 :이 템플릿 시스템을위한 백엔드 라이브러리는 완전히 중요하지 않습니다. 그러나이 기술은 있습니다. 범위가 지정된 템플릿과 위임 된 이벤트를 혼합하면 황금색입니다.