jquery/JS simple data bind for dynamic controls

Question

I have on the html page an and elements, created dynamically via 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>

And I want to have text binding from input to span.

So, I go with next JS:

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

Could be all in one line jquery, but... Anyway. This binding works fine during entering text to input. But once input looses focus - suddenly span looses inner text. I don't know why. This is exactly my question, how is it happening?

I've "worked around" this issue with adding

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

This way it works like I want it. But this is ridiculous. Any ideas regarding why does the value disappear from span at the first place?

Thanks in advance.

Your code seems to work fine to me. Can you replicate the issue with a working snippet or by creating a jsfiddle.net? — Ionut Necula
– Ionut Necula, Commented Mar 9, 2017 at 15:34

TheValyreanGroup · Accepted Answer · 2017-03-09 15:33:25Z

1

Change your input event to use the change event instead. IE does not support the 'input' event correctly. Alternatively, you could try using the keyup event.

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

Also, i changed your last line to jQuery as well. There's no reason to mix jQuery and pure JS together. It makes it easier to read if you keep it uniform.

answered Mar 9, 2017 at 15:33

TheValyreanGroup

3,5992 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vital Over a year ago

with "change" event span doesn't lose the text. But it also doesn't get it dynamically. Though I do see that the initial issue (with span loosing text) is gone. Could you please elaborate why is it happening with "input", "keyup" "keydown" etc events? (btw, "keyup" has the same issue, as "input" event. And I just don't get it, why? )

TheValyreanGroup Over a year ago

You must have something else in your code causing it. It works perfectly fine here, jsfiddle.net/5wdc0hrx Using keyup or change. I stay away from using input because of IE compatibility, although i've heard it's getting better.

Vital Over a year ago

Well.. for me it's a bit mystery. In case I find out what was wrong there - I'll update my question. As for now... with "change" event I don't need any additional "onfocuslost" or "blur" events. With "input" event - I need it. As for IE... well... I can't wait for the moment I'll be able to say RIP IE. :) Thanks.

Collectives™ on Stack Overflow

jquery/JS simple data bind for dynamic controls

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related