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

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

删除所有重复的代码，并将所有代码折叠为包含一些参数的单个函数调用。
确保销毁以前使用过的对话框，以便在创建新对话框时，使用新数据从头开始创建。

还有几个问题。传递给$ .get函数的get对象中的table:，pa:和delattr:属性是什么？它们未记录$.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");

});

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

多个Jquery .delegate（）问题

1 个答案: