多个 Jquery .delegate() 问题

Question

我有多个 jquery 委托函数来从列表中删除项目。它们第一次工作正常，但似乎停止为其他删除功能工作的删除功能。

所以我有 3 张桌子，可用性、经验和爱好。如果我点击从爱好列表中删除一个项目，它就会起作用，并禁止其他项目工作。随后从爱好中删除仍然有效。

用firebug查看过它，似乎每次点击从可用性或体验中删除条目都会触发与第一次触发从爱好中删除相同的链接，就好像它已保存它并且不会更改它一样。

$(document).ready(function () {
    var i = 1;
    var pager;
    var pai;
    var thetab;
    $('#tabs-5').delegate('.delav', 'click', function (e) {
        e.preventDefault();
        pager = $(this).attr("href");
        $("#dialog2").dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            buttons: {
                "Confirm": function () {
                    $('#ava_list').html("Loading..");

                    pai = $('#epa_id').val();
                    thetab = "availability";
                    $.get("/_includes/functions.php", {
                        cache: false,
                        table: thetab,
                        pa: pai,
                        delattr: pager
                    }, function (data) {
                        $('#ava_list').html(data);
                    });

                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialog2").dialog("open");
    });
});

$(document).ready(function () {
    var i = 1;
    var pager;
    var pai;
    var thetab;
    $('#tabs-3').delegate('.delexp', 'click', function (e) {
        e.preventDefault();
        pager = $(this).attr("href");
        $("#dialog2").dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            buttons: {
                "Confirm": function () {
                    $('#exp_list').html("Loading..");

                    pai = $('#epa_id').val();
                    thetab = "";
                    $.get("/_includes/functions.php?ms=", {
                        cache: false,
                        table: thetab,
                        pa: pai,
                        delattr: pager
                    }, function (data) {
                        $('#exp_list').html(data);
                    });

                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialog2").dialog("open");
    });
});

$(document).ready(function () {
    var i = 1;
    var pager;
    var pai;
    var thetab;
    $('#tabs-7').delegate('.delhob', 'click', function (e) {
        e.preventDefault();
        pager = $(this).attr("href");
        $("#dialog2").dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            buttons: {
                "Confirm": function () {
                    $('#hob_list').html("Loading..");

                    pai = $('#epa_id').val();
                    thetab = "hobby";
                    $.get("/_includes/functions.php", {
                        cache: false,
                        table: thetab,
                        pa: pai,
                        delattr: pager
                    }, function (data) {
                        $('#hob_list').html(data);
                    });

                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
        $("#dialog2").dialog("open");
    });
});

Answer 1

我建议首先进行以​​下更改，以极大地简化问题，并降低一个对话框与其他对话框发生冲突的可能性：

1. 摆脱所有重复的代码，并将所有代码折叠为带有几个参数的单个函数调用。
2. 确保销毁以前使用的对话框，以便在创建新对话框时，它会使用新数据从头开始创建。

还有几个问题。 table:、pa: 和 delattr: 属性在传递给 $.get 函数的 get 对象中做什么？它们没有记录在案的 $.get() 设置。另外，您的意思是所有三个对话框都具有相同的 pa: $('#epa_id').val(), 行吗？

下面介绍了如何将所有重复代码折叠到一个通用函数中，并为每个对话框使用唯一的 ID。我还删除了不需要的局部变量：

$(document).ready(function () {

    function configureDialogClick(parent, child, list, tab, dialogID) {
        $(parent).delegate(child, 'click', function (e) {
            e.preventDefault();
            var pager = $(this).attr("href");
            $(dialogID).dialog({
                autoOpen: false,
                width: 600,
                modal: true,
                buttons: {
                    "Confirm": function () {
                        $(list).html("Loading..");

                        $.get("/_includes/functions.php", {
                            cache: false,
                            table: tab,
                            pa: $('#epa_id').val(),
                            delattr: pager
                        }, function (data) {
                            $(list).html(data);
                        });

                        $(this).dialog("close");
                        $(this).dialog('destroy');
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                        $(this).dialog('destroy');
                    }
                }
            });
            $(dialogID).dialog("open");
        });
    }

    configureDialogClick("#tabs-3", ".delexp", "#ava_list", "", "#dialog3");
    configureDialogClick("#tabs-5", ".delav", "#hob_list", "availability", "#dialog5");
    configureDialogClick("#tabs-7", ".delhob", "#hob_list", "hobby", "#dialog7");

});

由于我无法运行此代码，因此我不能说这是否解决了问题，或者这只是正确方向的下一个清理步骤。