JQuery .bind()/.unbind() 문제

Question

내 상황이 JQuery 사이트에 주어진 예제와 겉으로는 동일하더라도, .bind() 및 .unbind()으로 JQuery에서 이상한 동작이 발생합니다. 이 경우, 바인드/언 바인드는 JQuery 탭 (다수 중 하나)에 적용됩니다. 탭을 클릭하면 ajax를 통해 컨트롤러 작업이로드됩니다.

# show.html.erb: 
$(document).ready(function(){ 
    var projectNav = function(){ 
     $("#tabs-project .loadingDiv").show(); 
     $.ajax({ url: "<%= url_for(params.except(:action).merge(:action => 'show_project')) %>", dataType: 'script' }) 
    }; 
    $("#projectMenuButton").bind('click', projectNav); 
}); 

# show_project.js.erb 
$("#tabs-project .loadingDiv").remove(); 
$("#tabs-project").append('<%= escape_javascript(render :partial => "profiles/project")%>') 
$("#projectMenuButton").unbind('click', projectNav); 

.unbind() 부분

그런 식으로 작동하지 않습니다 - 메뉴 버튼을 클릭하면 다시 다시 부분을 다시로드합니다.

기존의 언 바인드를 $("#projectMenuButton").unbind('click');으로 변경하면 탭의 주요 기능을 포함한 모든 항목의 바인딩이 해제되어보기가 올바른 div로 전환됩니다.

Answer 1

범위 문제가 있습니다 ... projectNav은 $(document).ready 범위 내에서만 정의되므로 unbind에 전달하면 정의되지 않습니다. 솔루션 :

# show.html.erb: 
var projectNav = function(){ 
     $("#tabs-project .loadingDiv").show(); 
     $.ajax({ url: "<%= url_for(params.except(:action).merge(:action => 'show_project')) %>", dataType: 'script' }) 
}; 
$(document).ready(function(){ 
    $("#projectMenuButton").bind('click', projectNav); 
}); 

# show_project.js.erb 
$("#tabs-project .loadingDiv").remove(); 
$("#tabs-project").append('<%= escape_javascript(render :partial => "profiles/project")%>') 
$("#projectMenuButton").unbind('click', projectNav);