javascript - 打开的 JqueryUI 对话框使用旧目标实例处理 onclick 事件

Question

<div>
  <ul>
    <li><a data-id="1" href="#">Show dialog 1</a></li>
    <li><a data-id="2" href="#">Show dialog 2</a></li>
    <li><a data-id="3" href="#">Show dialog 3</a></li>
    <li><a data-id="4" href="#">Show dialog 4</a></li>
    <li><a data-id="5" href="#">Show dialog 5</a></li>
    <li><a data-id="6" href="#">Show dialog 6</a></li>
  </ul>
</div>

<div class="dialogTest" style="display: none">
<p>Are you shure you want to delete this link?</p>
<p style="margin-top: 15px; text-align: center;"><button>Delete it!</button></p>
</div>
<div class="dialogTestMenu" style="display: none">
<p style="margin-top: 15px; text-align: center;"><a href="#">Delete this link</a></p>
</div>

$(function () {
    var ulMenu = function (target) {

    console.log('target item',target);

    $('.dialogTestMenu').dialog({
        title: 'Item #' + target.dataset.id + ' menu',
        modal: true,
        open: function () {
            var rootDialog = this;

            $(this).find('a').on('click', function () {
                $(rootDialog).dialog('close');

                $('.dialogTest').dialog({
                    title: 'Confirm delete #' + target.dataset.id,
                    modal: true,
                    open: function () {
                        var selfDialog = this;
                        $(this).find('button').on('click', function () {
                            console.log('target item to delete',target);
                            $(target).remove();
                            $(selfDialog).dialog('close');
                            return false;
                        });
                    },
                    buttons: {
                        Cancel: function () {
                            $(this).dialog('close');
                            $(rootDialog).dialog('open');
                        }
                    }
                });
                return false;
            });
        },
        buttons: {
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });

    };

    $('ul a').on('click', function () {
        ulMenu(this);
        return false;
    });
});

我有一个项目列表。单击项目调用带有菜单的对话框。通过单击菜单项删除此链接，我会收到另一个确认对话框。当我从第二个对话框中取消删除第一个项目(例如)，然后我尝试删除任何其他项目时，它会删除第一个项目，该项目已被取消。

请解释一下，当我尝试处理第二个对话框内的按钮点击时，为什么会得到 target 的旧实例。

Check out code ，填写免费使用控制台。

Answer 1

因为每次打开对话框时都使用.on()，所以它会向按钮附加一个新的单击函数。我改变你的jsFiddle。 Check it out 。我取消绑定(bind)最新的函数，然后绑定(bind)新的函数，顺便说一句，稍微改变了你的构造。

$(function () {
    var ulMenu = function () {
        var $this = $(this);
        $this.addClass('active');

        console.log('target item', this);

        $('.dialogTestMenu').dialog({
            title: 'Item #' + $this.data('id') + ' menu',
            modal: true,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                    $('.wrap a.active').removeClass('active');
                }
            }
        });

    };

    $('.dialogTestMenu a').bind('click', function () {
        $('.dialogTestMenu').dialog('close');

        var $current = $('.wrap a.active');

        $('.dialogTest').dialog({
            title: 'Confirm delete #' + $current.data('id'),
            modal: true,
            open: function () {
                var selfDialog = this;
                $(this).find('button').unbind('click').bind('click', function () {
                    console.log('target item to delete', $current.get(0));
                    $current.remove();
                    $(selfDialog).dialog('close');
                });
            },
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                    $('.dialogTestMenu').dialog('open');
                }
            }
        });
    });

    $('ul a').on('click', ulMenu);
});