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

Question

我试图从 google 搜索中拼凑出一些信息，但我找不到明确的答案来解释为什么 Kendo 提示仅在刷新页面时有效一次。这是一个基于 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容器 div #prompt 与对话框一起从文档中删除，当您再次单击按钮打开它时，它根本找不到要绑定的元素 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>

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

Open Kendo Prompt Customized dialog on button click

jquery

dialog

prompt

kendo-ui