剣道プロンプトボタンをクリックするとカスタマイズされたダイアログ

私は、Google検索から情報の断片をまとめようとしましたが、ページが更新されたときに剣道プロンプトが1回しか機能しないという明確な答えが見つかりません。 Telerikが提供するサンプルの1つに基づいた簡単なスクリプトですが、ボタンのクリックでプロンプトが表示されるように変更しました。クリック後、プロンプト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>

出典

2017-12-08 Paul

はちょうどあなたのための答えを投稿できます願っています。それがあなたのために働く場合はそれを見てください。 –

こんにちは@Paulは、同じ問題を抱えている他の人も利益を得ることができるように、あなたの答えが正しいかどうかを選択することができます –

@Muhammad Omer Aslam - 返信が正解でした。私は先月、元の回答の下にコメントを残しました。他の人にそれを明確にするために何か他のものをクリックする必要があるか分からない。 – Paul

は、コンテナではなく、通常の警告とプロンプトダイアログに標的化され、最初の時間のためにそれを開いた後、あなた一度okまたはcanceldiv#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>

出典

2017-12-08 23:27:32

ありがとうございます。それがトリックでした。 Javascriptは私の母国語ではなく、特にその直観は直感的ではありません。 – Paul

剣道プロンプトボタンをクリックするとカスタマイズされたダイアログ

答えて

関連する問題