dbybanez dbybanez - 6 months ago 12
Javascript Question

change a specific input value from a group of generated inputs using on input in jquery

I'm trying to change an input value from a group of generated inputs. How do I change the value of a specific input from a group of inputs? .input-process-info is the class of the table that i'm using.

$(".input-process-info input.process-inputs").on("change", function (){

})

<!-- Generated HTML code -->

<tr class='center aligned'>
<td><span>A</span></td>
<td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
<td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
<td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
</tr>
<tr class='center aligned'>
<td><span>A</span></td>
<td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
<td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
<td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
</tr>

Answer

If the HTML is dynamically generated, you may use event delegation as follows:

$("body").on("change", ".input-process-inf, input.process-inputs", function (e){
  $(e.target).val("New Value");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Generated HTML code -->

<tr class='center aligned'>
  <td><span>A</span></td>
  <td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
  <td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
  <td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
</tr>
<tr class='center aligned'>
  <td><span>A</span></td>
  <td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
  <td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
  <td><div class='ui mini input'><input class='process-inputs' type='text' placeholder=''></div></td>
</tr>