gpt4 book ai didi

jquery - 单击按钮打开 Kendo 提示自定义对话框

转载 作者:行者123 更新时间:2023-12-01 08:40:46 24 4
gpt4 key购买 nike

我尝试从谷歌搜索中拼凑一些信息,但我找不到明确的答案来解释为什么 Kendo Prompt 仅在刷新页面时起作用一次。这是一个简单的脚本,它基于 Telerik 提供的示例之一,但我对其进行了修改,以允许通过单击按钮来触发提示。似乎点击后,提示div就无法再访问了,但我不明白为什么。有人知道答案吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/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/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>

<div id="prompt"></div>
<div><button class="k-button" onclick="onClk()">Click Here</button></div>
<script>
function onClk() {
$("#prompt").kendoPrompt({
content: "Prompt text",
value: "Default input text",
messages:{
okText: "OK"
}
}).data("kendoPrompt").result.done(function(data){
console.log("User accepted with text: " + data);
})
.fail(function(data){
console.log("User rejected with text: " + data);
});
}
</script>
</body>
</html>

最佳答案

这是因为您使用的是针对容器的自定义提示,而不是正常的警报和提示对话框,并且在第一次打开它后,一旦单击确定取消 容器 div #prompt 与对话框一起从文档中删除,当您再次单击按钮打开它时,它根本找不到该元素绑定(bind) kendoprompt,以便它在调用 .data() 时抛出错误。理想情况下,如果您想以这种方式使用它,您应该在调用 javascript 内的函数之前创建容器 div 并将其附加到正文,更改您的代码以匹配演示中的以下代码。只需匹配您的 JavaScript 并尝试为函数使用有意义的名称即可。

希望对你有帮助

function myPrompt() {
$("#prompt").kendoPrompt({
content: "Prompt text",
value: "Default input text",
messages: {
okText: "OK"
}
}).data("kendoPrompt").result.done(function(data) {
console.log("User accepted with text: " + data);
})
.fail(function(data) {
console.log("User rejected with text: " + data);
});
}

$(document).ready(function() {
$(".k-button").on('click', function() {
if ($("#prompt").length < 1) {
var div = document.createElement('div');
div.setAttribute('id', 'prompt');
$('body').append(div);
}
myPrompt();
});
})
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/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/2017.3.1026/js/kendo.all.min.js"></script>
</head>

<body>

<div id="prompt"></div>
<div>
<button class="k-button">Click Here</button>
</div>

关于jquery - 单击按钮打开 Kendo 提示自定义对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47723260/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com