<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);
});