DOM에 새 요소를 추가 한 후 함수를 다시로드하는 방법

Question

내 앱의 프로필에 대해 + 팔로우 기능을 사용하고 있습니다. 팔로우 기능은 한 번만 (새로운 페이지로드시) 작동하지만 스크립트가 DOM 요소를 대체 한 후에도 작동하지 않습니다. 프로파일하지가 사용자 따르고 인

HTML 출력 :

<div id="follow"> 
    <a>Follow profile</a> 
</div> 

HTML 출력 프로파일은 현재 사용자가 이어진다 :

<div id="unfollow"> 
    <a>Unfollow profile</a> 
</div> 

마법 jQuery를 일어나는. 다음 함수는 $(document).ready() 기능에 싸여 :

function follow() { 

    $("#follow a").on("click", function() { 
     // $.getJSON fn here that follows profile and returns success T/F 
     if (success) { 
      $("#follow").remove(); 
      $("#follow-container").html('<div id="unfollow"><a>Unfollow profile</a></div>'); 
     } 
    }); 

    $("#unfollow a").on("click", function() { 
     // $.getJSON fn here that unfollows profile and returns success T/F 
     if (success) { 
      $("#unfollow").remove(); 
      $("#follow-container").html('<div id="follow"><a>Follow profile</a></div>'); 
     } 
    }); 

} 

은 사용자가 "프로필에 따라"를 클릭하자. 스크립트는 #follow a 링크를 제거하고 #unfollow a 링크로 바꿉니다. 그러나 #unfollow a을 클릭하면 실행되는 JS 스크립트는 페이지로드 후이 요소가 DOM에 추가 되었기 때문에 실행되지 않습니다. 이 작동하지 않는

if (success) { 
     $("#follow").remove(); 
     $("#follow-container").html('<div id="unfollow"><a>Unfollow profile</a></div>'); 
     // reload function 
     follow(); 
    } 

:

이 문제를 해결하려면

는이 같은 기능을 새로했습니다. unfollow click 이벤트가 등록되지 않았습니다. 이 경우 다른 방법으로 DOM을 다시로드합니까?

Answer 1

사용 이벤트 위임 -

$("#follow-container").on("click","#follow a", function() { 

하고 또한

$("#follow-container").on("click","#unfollow a", function() { 

가 : 당신이 여기 $(#follow-container") 오타가이해야 $("#follow-container")

• http://api.jquery.com/on/
• http://learn.jquery.com/events/event-delegation/