Question

我在html页面上有一个和元素，通过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，但是......无论如何。在输入文本时，此绑定可正常工作。但是一旦输入失去焦点 - 突然间会松开内心文本。我不知道为什么。这正是我的问题，它是如何发生的？

我已经＆＃34;四处工作＆＃34;这个问题与添加

 $(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和纯JS混合在一起。如果保持统一，它会更容易阅读。

jquery / JS简单数据绑定动态控件

1 个答案: