jquery/JSダイナミックコントロール用のシンプルなデータバインド

Question

jsを介して動的に作成された要素と要素をhtmlページに追加しました。

<input type="text" id="MyInput" name="MyInput" 
class='form-control copyMe' placeholder="enter smth pls"/> 
<div id="jsonTextAreaDiv" contenteditable="true"> 
<span id="MyInput_JSON"></span> 
</div> 

入力から入力までのテキストバインディングが必要です。とにかく...

$(document).on('input', 'input.copyMe', function(){ 
    var valToInsert = $(this).val(); 
    var idToInsert = $(this).attr("id") + "_JSON";   
    document.getElementById(idToInsert).innerHTML = valToInsert; 
}); 

は1行jqueryの内のすべてのかもしれないが、：

だから、私は次のJSで行きます。 このバインディングは、入力するテキストの入力中に正常に機能します。 しかし、一度入力がフォーカスを失うと、突然スパンが内側のテキストを失います。 私は理由を知らない。これはちょうど私の質問です、どうしたのですか？

は私が

$(document).on('input', 'input.copyMe', function(){ 
    var valToInsert = $(this).val(); 
var idToInsert = $(this).attr("id") + "_JSON";   
    document.getElementById(idToInsert).innerHTML=valToInsert; 
}).on('blur', '.copyMe', function(){ 
var valToInsert = $(this).val(); 
    var idToInsert = $(this).attr("id") + "_JSON";   
    document.getElementById(idToInsert).innerHTML=valToInsert;}); 

私はそれをしたいようにそれが動作します。この方法を追加することで、この問題を「回避」しました。しかし、これはばかげている。 最初の場所でスパンから値が消えるのはなぜですか？

ありがとうございます。

Answer 1

inputイベントを変更して、代わりにchangeイベントを使用してください。 IEは 'input'イベントを正しくサポートしていません。また、keyupイベントを試すこともできます。

$(document).on('change', 'input.copyMe', function(){ 
    var valToInsert = $(this).val(); 
    var idToInsert = "#" + $(this).attr("id") + "_JSON";   
    $(idToInsert).html(valToInsert); 
}); 

また、最後の行もjQueryに変更しました。 jQueryとpure JSを混在させる必要はありません。あなたが一律にしておくと、読みやすくなります。