How to bind 2 input fields dynamically added in a table with Jquery

Question

I am not very familiar with javascript/Jquery Syntax, I would like to bind 2 input text fields that were dynamically added to a table inside a loop. The main goal is to automatically fill the second text field with text from the first one. I was able to do it for 2 static text field by doing that.

$(document).bind('input', '#changeReviewer', function () {
    var stt = $('#changeReviewer').val();
    stt = stt.replace(/ /g,'.')
   $("#changeReviewerEmail").val(stt + "@@xxxxxx.com");
});

I have tried a few things but when I try to get the value of the first input, it always returns empty. Thanks.

`.bind()` never allowed for *event delegation*. Use `.on`. [bind](https://api.jquery.com/bind/) - *As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on().* — freedomn-m, Sep 24 '21 at 13:17
Can you provide the html/code that *doesn't* work? There's not much point saying *here's some code that works, but my code doesn't* — freedomn-m, Sep 24 '21 at 13:18
Sorry, I was probably not clear in my question, The code above is working and I use it in my code to bind 2 inputs. What I am trying to do is the equivalent of that but when those 2 inputs are in rows in a table that was dynamically generated. — Julien7377, Sep 24 '21 at 13:25
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Sep 24 '21 at 13:28
1) make sure they have a class each (not an id) as IDs must be unique. Then use `$(document).on("click", ".changeReviewer", function() {` how you get the other related input(s?) will depend on your HTML, but possibly something like: `$(this).closest("tr").find(".changeReviewrEmail").val($(this).val().replace(/ /g, "."))` — freedomn-m, Sep 24 '21 at 13:29
Thanks, I will try that, and thanks for explaining the difference between id and class. I have been wondering why sometimes in code class was used instead of id... stupid question, if the input has already a class attached to it such as a css class? — Julien7377, Sep 24 '21 at 13:35

Dibash Sapkota · Answer 1 · 2021-09-24T13:33:45.420

Check this code

$(document).on('input', '#changeReviewer', function() {
  var stt = $('#changeReviewer').val();
  stt = stt.replace(/ /g, '.');

  $("#changeReviewerEmail").val(stt + "@@xxxxxx.com");
});


$('#addbtn').click(function() {
  $('div').empty().append(`<input id='changeReviewer'><input id='changeReviewerEmail'>`);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button id='addbtn'>add inputs</button>
</div>

How to bind 2 input fields dynamically added in a table with Jquery

1 Answers1