jquery/JS動態控件的簡單數據綁定

我在html頁面中有一個和通過js動態創建的元素。jquery/JS動態控件的簡單數據綁定

<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>

而我想要從輸入到文本的跨文本綁定。

所以，我去下一個JS：

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

可能是所有在一行jQuery的，但...反正。在輸入文本時，此綁定可以正常工作。但是，一旦輸入失去焦點 - 突然跨越內部文本丟失。我不知道爲什麼。這正是我的問題，它是如何發生的？

我已經加入

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

這樣，它就像我希望它「工作圍繞」這個問題。但這很荒謬。關於爲什麼價值從第一位消失的任何想法？

在此先感謝。

來源

2017-03-09 Vital

你的代碼似乎對我很好。您是否可以通過工作片段或創建http://jsfiddle.net來複制問題？帶有「更改」事件跨度的 – Ionut

將您的input事件改爲使用change事件。 IE不能正確支持「輸入」事件。或者，您可以嘗試使用keyup事件。

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

而且，我改變了你的最後一行jQuery的爲好。沒有理由將jQuery和純JS混合在一起。如果你保持統一，它會使讀起來更容易。

來源

2017-03-09 15:33:25 TheValyreanGroup

不會丟失文本。但它也不會動態獲取它。雖然我確實看到最初的問題（失去文本的跨度）沒有了。請您詳細說明爲什麼它會發生「輸入」，「keyup」「keydown」等事件？（順便說一句，「keyup」與「輸入」事件有相同的問題，我只是不明白，爲什麼？） – Vital

你的代碼中必須有其他東西導致它。它在這裏工作得很好，https://jsfiddle.net/5wdc0hrx/使用'keyup'或'change'。由於IE兼容性，我遠離使用「輸入」，儘管我聽說它正在變得越來越好。 – TheValyreanGroup

呃..對我來說這有點神祕。如果我發現那裏有什麼問題 - 我會更新我的問題。至於現在...與「改變」事件我不需要任何額外的「onfocuslost」或「模糊」事件。有了「輸入」事件 - 我需要它。至於IE ...好吧......我不能等待一會兒我就可以說RIP IE了。 :) 謝謝。 – Vital

jquery/JS動態控件的簡單數據綁定

回答

相關問題