Using jQuery to dynamically update the DOM with .blur and .click to switch out elements

Question

I am newb with jQuery and would appreciate your help.

I am struggling a bit with jQuery DOM manipulation, where I have an <input>, and .on("blur") it updates the DOM, by removing the <input>, and inserts a <div> with the <input> value, and when you click on the <div>, it must update the DOM, by adding back the <input> with the value of the <div>.

When I click on the <div>, nothing happens. Any Ideas?

My current code:

$(document).ready(function() {

  var inputValueByClassName = null;

  $(".divInput").on("click", function() {
    alert("clicked!")
    $(".divInput").replaceWith($('<input type="text" class="textInput>'));
    $(".divInput").html(inputValueByClassName);
  });

  $(".textInput").on("blur", function() {
    inputValueByClassName = $('input[type="text"].textInput').val();
    console.log(inputValueByClassName);
    $(".textInput").replaceWith($('<div class="divInput">' + inputValueByClassName + '</div>'));
  })
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="textInput" value="123"><br>

@DjaveThanks for pointing that out! I have fixed class="textInput", but still not working — onmyway, Apr 25 '19 at 09:28

score 3 · Answer 1 · edited Apr 25 '19 at 09:33

That's because your on('click') function is only registered for Elements that are currently on the page (there are none at page load). If you insert the element at a later time (like you do when you blur the input element) the clickhandler is not automatically bound to your dynamically inserted div.

You can use event delegation like $(document).on("click", ".divInput" , function() { });

Then you will bind the click to the whole document and react if an element with class divInput is clicked, otherwise it doesn't do anything.

Keep in mind that this is not very performant, try reducing the area in $(document) to something like $('.input-area').on('click', '.divInput', function() {}); where input-area is just wrapped around your input

Deepak A · Accepted Answer · 2019-04-25T09:40:45.237

1

You missed to close class="textInput" in input . For dynamic tags use $(document).on("click",

$(document).ready(function() {

    var inputValueByClassName = null;

    $(document).on("click",'.divInput',function(){
         
         $(this).replaceWith($('<input type="text" class="textInput" value="'+$(this).text()+'">'));
    
    });

   $(document).on("blur",'.textInput' ,function(){
        var inputValueByClassName = $(this).val();
        $(this).replaceWith($('<div class="divInput">' + inputValueByClassName + '</div>'));
   })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <input type="text" class="textInput" value="123"><br>
</body>

edited Apr 25 '19 at 09:40

answered Apr 25 '19 at 09:37

Deepak A

1,624
1
7
16

Thanks for the solution! I have one issue; when I do .onblur the second time, the does not get changed to
. Any ideas?
– onmyway Apr 25 '19 at 09:39
@onmyway edited please check. – Deepak A Apr 25 '19 at 09:41
@onmyway if this solution works then please approve it,thanks – Deepak A Apr 25 '19 at 09:44

score 0 · Answer 3 · answered Apr 25 '19 at 09:29

0

You call $(".divInput").on("click", function() {}) on page load, at that point your div doesn't exist yet.

You can use $.on('click', '.divInput', function() {}); to listen to any elements that has divInput class which is added to the dom tree at any points (even in the future).
And $.on('blur', '.textInput', function() {}); for the input.

But I recommend that you have both elements exist and show() or hide() them.

answered Apr 25 '19 at 09:29

hope_is_grim

1,934
15
24

Huge DUPE....... – mplungjan Apr 25 '19 at 09:33

Using jQuery to dynamically update the DOM with .blur and .click to switch out elements

3 Answers3