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

【问题标题】：Open Kendo Prompt Customized dialog on button click单击按钮打开 Kendo Prompt Customized 对话框
【发布时间】：2018-05-23 05:23:54
【问题描述】：

我试图从谷歌搜索中拼凑出一些信息，但我找不到一个明确的答案来解释为什么剑道提示只在刷新页面时工作一次。这是一个基于 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>

【问题讨论】：

刚刚为您发布了答案。如果它适合你，请看看它。
嘿@Paul，如果这对您有用，您能否选择正确的答案，以便其他遇到相同问题的人也可以从中受益
@Muhammad Omer Aslam - 你的回答是正确的。我在上个月的原始回复下方留下了评论。不知道我还需要点击什么才能让其他人清楚。
:) 你只需要选择它是正确的，绿色的 TICK MARK。你只需要点击它

标签： jquery kendo-ui dialog prompt

【解决方案1】：

那是因为您使用的是针对容器的自定义提示而不是普通的警报和提示对话框，并且在第一次打开它后，一旦您单击ok 或cancel 容器div @987654324 @ 与对话框一起从文档中删除，当您再次单击按钮打开它时，它根本找不到要绑定的元素 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>

【讨论】：

非常感谢。那成功了。 Javascript 不是我的母语，它的一些怪癖不是特别直观。