jquery로 대체 할 때 onclick 이벤트 추가

Question

jquery의 replaceWith에 onclick 이벤트를 넣는 데 문제가 있습니다. 두 번째 onclick 이벤트에서 내 함수가 작동하지 않습니다. 이것은 내 샘플 코드입니다.

sample.html

<div id = "first_div" onClick = "replace()">First</div> 

my.js

function replace() { 
    $('#first_div').replaceWith("<div id = 'sec_div' onclick='flyout('fb')'>Second</div>"); 
} 

나는 그것이 작동 first_div을 클릭

. 그것은 2nd_div를 보여 주지만 두 번째 div를 클릭하면 아무 것도하지 않습니다.

function flyout(data){ 
    if (data == "fb") $('#sec_div').replaceWith("<div>Last</div>"); 
} 

Answer 1

코드가 작동하지 않는 이유는 함수를 #sec_div 요소의 'onclick'에 전달하지 않기 때문입니다. onclick="flyout('fb');"으로 정의되었지만 플라이 아웃 함수가 아무 것도 반환하지 않습니다. 아래 코드를 변경하여 flyout이 함수를 반환하고이 동일한 함수를 data 매개 변수에 대해 다른 값으로 사용하려는 경우 해당 값을 data 값으로 캡슐화합니다.

또한 Javascript에서 HTML을 분리하는 데 도움이되는 솔루션이 제공됩니다. jquery를 사용하면 delegate 메서드를 사용하여 함수를 이벤트에 바인딩 할 수 있습니다.

HTML :

<div id="first_div">First</div> 

JS :

$("body").delegate('#first_div', 'click', replace); 
$("body").delegate('#sec_div', 'click', flyout("fb")); 

// change replace to: 
function replace() { 
    $(this).replaceWith("<div id='sec_div'>Second</div>"); 
} 
// change flyout to: 
function flyout(data){ 
    return (function(){ 
     if (data == "fb") { 
      $(this).replaceWith("<div>Last</div>"); 
     } 
    }); 
} 

편집 : live 방법의 최신 JQuery와 문서의 사용에 따르면이되지 않습니다, 대신 delegate를 사용합니다.

Answer 2

새 div에 바인딩 된 클릭 이벤트가 없습니다.

replaceWith() 호출 후에 새 수신기를 추가하거나 live()를 사용하여 문서 수준에서 수신 대기합니다.

Answer 3

replace 함수에서 제대로 이스케이프 처리하지 않았습니다.

onclick='flyout('fb')' 

부분에는 4 개의 작은 따옴표가 있습니다. 두 번째 따옴표는 첫 번째 따옴표를 닫고 세 번째 따옴표는 새 문자열을 시작합니다.

element="<div id = 'sec_div' onclick='flyout(\"fb\")'>Second</div>" 
$('#first_div').replaceWith(element); 

는 또한 http://jsfiddle.net/5Stuh/