我有多个具有顺序ID的选择，如何在jquery中引用其中之一？

Question

I have a form where the user presses a button and dynamically generates a row of a table, which has 3 columns. Each generated row is added to the table and has the following form:

<tr id="1" class="">
  <td>
    <select id="cmb_articulo_1" name="articulo[]">
  </td>
  <td>
    <input type="text" id="txtcantidad_1" name="txtcantidad[]">
  </td>
  <td>
    <input type="text" id="txtprecio_1" name="txtprecio[]">
  </td>
  <td>
    <select id="cmb_descuento_1" name="descuento[]">
  </td>
</tr>

Each element of the generated row is added a sequential corresponding to the generated row ( id="cmb_articulo_1", id="cmb_articulo_2", id="cmb_articulo_3",..)

The user may have generated n-rows and the problem is that I have not been able to determine how to identify in which select from which row an option was chosen and how to process that option.

How to process the chosen option, has to do with when, for example, I have a select with id = "combo" , I can process the chosen option with $("#combo").change(function{ . . . }) , But in the situation I raise, there may be 1, 2, 5, 10, 20, etc. rows created dynamically, so I can not process the chosen option as in the previous case. I understand that there must be a way to process the chosen option in a select of any row, making a dynamic reference of that element.

Please, can you help me with these two consultations ?, from now, thank you very much.

Answer 1

Add a class to all <select> elements in the table:

<select class="cmb_articulo" id="cmb_articulo_1" name="articulo[]">

Then use event delegation to be able to bind dynamically inserted elements:

$(document).on('change', '.cmb_articulo', function () {
  var $select = $(this);
  var $row = $select.closest('tr');
  var id = $row.attr('id');

  // You have the ID now, do whatever you need to.
});