Question

我试图将谷歌搜索中的一些信息拼凑起来，但我无法找到一个明确的答案，为什么剑道提示仅在页面刷新时才有效。这是一个简单的脚本，它基于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>

Answer 1

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

希望有所帮助

＆＃13;

javascript

＆＃13;

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

＆＃13;

单击按钮打开Kendo Prompt Customized对话框

1 个答案: