Jquery表单问题。添加从选择框中删除选项

Question

我有一个有很多选项的表格。

在表单中，我可以将数据设为私有或公开；

1. 将数据设为私有：是、否（单选按钮）
2. 如果单击“是”，则显示一个隐藏的 div，其中包含另外 2 个表单选项； 一个。会员姓名搜索（文字输入） b.选定的成员（多选择框）。

如果我单击将数据设为私有“是”，并搜索用户名，它会像建议框一样显示找到的结果。当我单击用户名（在建议框中显示的找到的结果之一中）时，我可以将其成功添加到我的多选择框（选定的成员）

如果我决定将其公开并在添加后单击将数据设为私有“否”一些成员到我的多选择框（选定的成员），我正在删除所有选项，并在其中添加 1 个选项（公共视图）。

问题从这里开始。在提交表单之前，如果我再次单击将数据设为私有“是”（1；单击是，选择了一些成员，2；单击否并从选择框中删除了所有选项，3；再次单击是），搜索一些成员并单击它们，它在我的多选择框中添加了两次（选定的成员）。

有趣的是，如果我执行两次（添加一些成员，单击“否”隐私和删除选项），下次当我想添加一些成员时，它会添加两次。如果我做5次，那就是加5次。

这是我的 Jquery；

// Private Options
$('input[name=make_private]').bind('click', function() {
    // Make It Private
    if ($(this).val() == 1) {
        $('.frm_make_private_1').fadeIn(1000);
        // Get clicked member
        $('a.member').live('click', function() {
            var username = $(this).text();
            var id = $(this).attr("id");
            // Add it to the Allowed Members Multi Selectbox
            $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected", "selected"));
            // Don't load the page
            return false;
        });
    }
    // Make It Public
    else {
        // Hide everything about Product Privacy
        $('.frm_make_private_1').fadeOut(1000);
        // Remove All Options
        $("#allowedMembers option").each(function() {
            $(this).remove();
        });
        // Add Public Option
        $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
    }
});

Answer 1

当您多次绑定事件时，您应该首先.unbind()。否则，您将有多个（可能是相同的）事件绑定到同一个操作

尝试

('input[name=make_private]').unbind().bind('click', function () {
// Make It Private
if ($(this).val() == 1) {
    $('.frm_make_private_1').fadeIn(1000);
    // Get clicked member
    $('a.member').unbind().live('click', function () {
        var username = $(this).text();
        var id = $(this).attr("id");
        // Add it to the Allowed Members Multi Selectbox
        $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected","selected"));
        // Don't load the page
        return false;
    });
}
// Make It Public
else {
    // Hide everything about Product Privacy
    $('.frm_make_private_1').fadeOut(1000);
    // Remove All Options
    $("#allowedMembers option").each(function() {
        $(this).remove();
    });         
    // Add Public Option
    $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
}
});

Answer 2

找到了方法，将 $('a.member').live('click') 移到 $('input[name=make_private]').bind('click') 之外就可以了。谢谢罗恩指导我。

// Private Options
$('input[name=make_private]').bind('click', function () {
    // Make It Private
    if ($(this).val() == 1) {
        $('.frm_make_private_1').fadeIn(1000);
    }
    // Make It Public
    else {
        // Hide everything about Product Privacy
        $('.frm_make_private_1').fadeOut(1000);
        // Remove All Options
        $("#allowedMembers option").each(function() {
            $(this).remove();
        });         
        // Add Public Option
        $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
    }
});
// Get clicked member
    $('a.member').live('click', function () {
        var username = $(this).text();
        var id = $(this).attr("id");
        // Add it to the Allowed Members Multi Selectbox
        $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected","selected"));
        // Don't load the page
        return false;
    });