用户定义的回调函数在Javascript / jQuery中被多次触发

时间:2013-02-12 10:41:38

标签: javascript jquery function callback user-defined

有一些类似的问题,但它们似乎都与本机jQuery回调函数有关。

所以我有这个代码(live)创建一个包含一些表单元素的div。 当删除div之前(之前),应该在回调函数中检索这些元素的值。

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

    // remove div
}

出乎意料的是,在第一次执行弹出窗口后,回调函数被多次(越来越多)触发。

我简化了代码,这里是 fiddle

3 个答案:

答案 0 :(得分: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);
    });
});

基本上,您需要通过调用 off()方法来删除事件处理程序。

答案 1 :(得分:0)

尝试动态生成元素而不是使用字符串。这将允许您更轻松地绑定事件。

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/

答案 2 :(得分:0)

我不知道确切的情况,但是为什么每次显示弹出窗口时都要绑定和取消绑定事件?

你只能绑定一次,就像这样,不是吗?

$(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();
});