JqueryUI对话框打开处理onclick事件与旧的目标实例

JqueryUI dialog on open handles onclick event with old target instance

本文关键字：目标 实例 事件 onclick 对话框 处理 JqueryUI      更新时间：2023-09-26
<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;
    });
});

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

解释我，为什么我得到一个旧的实例目标，当我试图处理点击按钮在第二个对话框。

检查代码，填充免费使用控制台

因为每次打开对话框时都使用.on()，它为按钮附加一个新的单击功能。我改变你的jsFiddle。看看吧。我解绑定了最新的函数，然后绑定了一个新的，顺便改变了你的结构。

$(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);
});
相关文章：