Многократная проблема 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(), строки в них?

Вот как вы можете свести весь дублирующийся код в одну общую функцию и использовать уникальные идентификаторы для каждого диалога. Я также удалил локальные переменные, которые не были нужны:

$(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");

});

Поскольку я не могу запустить этот код, я не могу сказать, устраняет ли это проблему или это просто следующий шаг очистки в правильном направлении.