多个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

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

使用几个parameters.

• Make删除所有重复的代码并将所有代码折叠到单个函数调用中确保您销毁了以前使用的对话框，这样当您创建新对话框时，它将使用您的新数据从头开始创建。

还有几个问题。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");

});

因为我没有办法运行这段代码，所以我不能说这是修复了问题，还是只是朝着正确方向的下一步清理。