在点击监听器中，我有一个返回 promise 并打开弹出窗口的函数。从弹出窗口我想传递选定值的数组。然而，这个 promise 只在我第一次点击“发布”按钮时有效。
我做错了什么？
function showtWindow(){
var selected = [];
var post = false;
var dfd = new jQuery.Deferred();
var promise = dfd.promise();
var popupWindow = $("#popupWindow").data('kendoWindow');
//init window only first time
if (popupWindow === undefined) {
popupWindow = $("#popupWindow").kendoWindow({
title: 'Test',
width: 400,
height: 600,
modal: true,
close: function () {
//this.destroy();
if (post) {
dfd.resolve(selected);
}
}
}).data('kendoWindow');
popupWindow.wrapper.find('.confirm').on('click', function (e) {
selected = popupWindow.wrapper.find('.list input:checked').map(function (i, el) {
return $(el).val();
}).get();
post = true;
popupWindow.close();
});
popupWindow.wrapper.find('.cancel').on('click', function (e) {
popupWindow.close();
});
}
popupWindow.center().open();
return promise;
}
$('.testButton').on('click', function(){
var promise = showtWindow();
promise.then(function (e1) {
console.log(e1)
})/*.done(function (e2) {
console.log(e2)
}).fail(function (e3) {
console.log(e3)
})*/
})
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>
<div hidden="hidden" id="popupWindow">
<ul class="list">
<li>
<label><input type="checkbox" value="1" />One</label>
</li>
<li>
<label><input type="checkbox" value="2" />Two</label>
</li>
</ul>
<button class="confirm">Post</button>
<button class="cancel">Cancel</button>
</div>
<button class="testButton">Test</button>
</body>
最佳答案
试试这个，这在你的 KendoSandbox 中对我有用；
var popupWindow, dfd;
function showtWindow(){
var selected = [];
var post = false;
dfd = new jQuery.Deferred();
var promise = dfd.promise();
popupWindow = $("#popupWindow").data('kendoWindow');
//init window only first time
if (popupWindow === undefined) { // removed the if undefined clause
popupWindow = $("#popupWindow").kendoWindow({
title: 'Test',
width: 400,
height: 600,
modal: true,
close: function () {
if (post) {
dfd.resolve(selected);
}
// this.destroy();
}
}).data('kendoWindow');
popupWindow.wrapper.find('.confirm').on('click', function (e) {
selected = popupWindow.wrapper.find('.list input:checked').map(function (i, el) {
return $(el).val();
}).get();
post = true;
popupWindow.close();
});
popupWindow.wrapper.find('.cancel').on('click', function (e) {
popupWindow.close();
});
} // removed the if undefined clause
popupWindow.center().open();
return promise;
}
希望这会有所帮助，我只是在单击按钮时覆盖弹出窗口和关联的 promise ，以便每次单击按钮都可以捕获 promise (抛出)。
关于来自 jQuery Deferred 的 JavaScript promise 仅在第一次解析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56477298/