Javascript/jQuery에서 사용자 정의 콜백 함수가 여러 번 발생합니다.

Question

비슷한 질문이 있지만 기본 jQuery 콜백 함수와 관련이 있습니다.

그래서이 코드는 (라이브) 일부 양식 요소를 포함하는 div를 만듭니다. div를 제거하기 전에 (before) 콜백 함수 내에서 이러한 요소의 값을 가져와야합니다.

function popup(callback) { 
    // ... 
    // before removing the div 
    callback.call(); 

    // remove div 
} 

예기치 않게 처음 팝업이 실행 된 후 콜백 함수가 여러 번 발생합니다.

나는 코드를 단순화했으며 여기는 fiddle입니다.

Answer 1

나는 이것이 당신이 필요 바랍니다.

function popup(callback) { 
    $("body").append('<div><span id="test">test</span> <a href="#" id="close">close</a></div>'); 
    $(document).on("click", "#close", function() { 
     callback.call(); 

     // 
     //callback = function() {}; 
     $(document).off("click", "#close"); 
     $("div").remove(); 

    }); 
}; 

$(document).on("click", "#open", function() { 
    popup(function() { 
     alert('$("#test").length = ' + $("#test").length); 
    }); 
}); 

기본적으로, 당신은 오프() 메소드를 호출하여 이벤트 핸들러를 제거해야합니다.

Answer 2

문자열을 사용하는 대신 요소를 동적으로 생성 해보십시오. 이렇게하면 이벤트를 더 쉽게 바인딩 할 수 있습니다.

function popup(callback) 
{ var $elem = $("<div></div>"); 
    $elem.append($("<span></span>").html("test")); 
    $elem.append(" "); 
    $elem.append($("<a></a>").html("close").attr("href", "#")); 

    $("body").append($elem); 
    $elem.find("a").click(function() { 
     callback.call(); 
     $elem.remove(); 
    }); 
}; 

$(document).on("click", "#open", function() { 
    popup(function() { 
     alert('$("#test").length = ' + $("#test").length); 
    }); 
}); 

예 : http://jsfiddle.net/4se7M/2/

Answer 3

정확한 시나리오를 모르지만 팝업을 표시 할 때마다 이벤트를 바인딩하고 바인딩 해제하려는 이유는 무엇입니까?

한 번만 바인딩 할 수 있습니다. 그렇습니까?

$(document).on("click", "#close", function() { 
    alert('$("#test").length = ' + $("#test").length); 
    $("div").remove(); 
}); 

function popup() { 
    $("body").append('<div><span id="test">test</span> <a href="#" id="close">close</a></div>'); 
}; 

$(document).on("click", "#open", function() { 
    popup(); 
});