Question

我在这两个小提琴中准备了一个代码（非常相似）：

http://jsfiddle.net/N29rU/1/ - 此作品
http://jsfiddle.net/N29rU/2/ - 这不起作用

我正在尝试做的事情（正如您可能想到的）是显示select，只有在用户点击 edit 时才会弹出。选择某些内容后，我想隐藏此select节点并再次显示要编辑的链接。我希望它隐藏select即使没有任何变化，这也是我使用事件click代替change的原因。

现在关于我的问题。为什么在单击编辑后删除事件侦听器，然后选择一些内容，然后再次单击编辑。现在，当我想选择一些事件监听器不在那里时（在Chrome开发工具中检查）。

请注意我选择$(s)变量，我不会在任何地方重新启动它。

粘贴代码

HTML

<span id="text">Some text</span> <span>(<a href="#" id="show_select">edit</a>)</span>

java脚本

var data = ["Some text", "Another thing", "Select me ;]"];

var s = $("<select/>");
$(s).hide();
for (var val in data) {
    $("<option />", {
        value: val,
        text: data[val]
    }).appendTo(s);
}

创建处理程序的工作版本

$('#show_select').on('click', function () {
    $(this).parent().fadeOut("fast", function () {
        $("#text").html($(s));
        $(s).fadeIn("fast");
        $(s).on('click', function (e) {
            $(s).fadeOut("fast", function () {
                var selected = $(s).find(":selected").first().text();
                $('#text').html(selected).fadeIn("fast");
                $('#show_select').parent().fadeIn("fast");
            });
        });
    });
});

重新点击

后，此功能不起作用

$(s).on('click', function (e) {
    $(s).fadeOut("fast", function () {
        var selected = $(s).find(":selected").first().text();
        $('#text').html(selected).fadeIn("fast");
        $('#show_select').parent().fadeIn("fast");
    });
});

$('#show_select').on('click', function () {
    $(this).parent().fadeOut("fast", function () {
        $("#text").html($(s));
        $(s).fadeIn("fast");
    });
});

Answer 1

我认为您的问题是您正在更改html，因此您每次都使用新版本的s更新dom，因此不会有任何绑定到此新版本的s的事件。如果您只是将s附加到dom一次，您可以淡入淡出而无需重新附加事件，并且性能也会更好：

var data = ["Some text", "Another thing", "Select me ;]"];

var s = $("<select/>");
var text = $("#text");
s.hide();
for (var val in data) {
    $("<option />", {
        value: val,
        text: data[val]
    }).appendTo(s);
}

s.insertAfter(text);

s.on('click', function (e) {
    s.fadeOut("fast", function () {
        var selected = s.find(":selected").first().text();
        text.html(selected).fadeIn("fast");
        $('#show_select').parent().fadeIn("fast");
    });
});

$('#show_select').on('click', function () {
    $(this).parent().fadeOut("fast", function () {
        s.fadeIn("fast");
    });
});

Example

重新显示节点后，事件侦听器将丢失

1 个答案: