Как получить данные-атрибуты более чем выбрать вход?

Question

$('select.dates').change(function() {
   $(this).closest('tr').find('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
});

  
function addnewrow()   
{  
var n=($('.table tr').length-0)+1;  
var tr = '<tr>'+  
 
'<td><select class="dates"><option value="select" data-value="">select</option><option value="value1" data-value="500">value1</option><option value="value2" data-value="300">value2</option><option value="value3" data-value="250">value3</option></select>'+
'<td><input type="text" class="numValue" value="" /></td>'+




'</tr>';  
$('.detail').append(tr);
    
}
$('#add').click(function()  
{
 
addnewrow();  
});

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

<table class="table">
<thead>
                  <th><input type="button" value="+" id="add" class="btnbtn-primary"></th>  
    <th>select</th>
    <th>value</th>

</thead>
<tbody class="detail">
<tr class="row">
<td>
<select class="dates">
    <option value="select" data-value="">select</option>
    <option value="value1" data-value="500">value1</option>
    <option value="value2" data-value="600">value2</option>
    <option value="value3" data-value="900">value3</option>
</select>
</td>
<td><input type="text" class="numValue" value="" /></td>
</tr>
<tr>
<td>
<select class="dates">
    <option value="select" data-value="">select</option>
    <option value="value1" data-value="500">value1</option>
    <option value="value2" data-value="300">value2</option>
    <option value="value3" data-value="250">value3</option>
</select>
</td>
<td>
<input type="text" class="numValue" value="" />
</td>
</tr>
<tr>
<td>
<select class="dates">
    <option value="select" data-value="">select</option>
    <option value="value1" data-value="500">value1</option>
    <option value="value2" data-value="300">value2</option>
    <option value="value3" data-value="250">value3</option>
</select>
</td>
<td>
<input type="text" class="numValue" value="" />
</td>
</tr>
</tbody>
</table>

$('select.dates').change(function() {
   $(this).next('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
  
    <th>select</th>
    <th>value</th>

</thead>
<tbody>
<tr class="row">
  <td>
  <select class="dates">
      <option value="1/1/11" data-value="num1">1/1/11</option>
      <option value="1/2/11" data-value="num2">1/2/11</option>
      <option value="1/3/11" data-value="num3">1/3/11</option>
  </select>
  </td>
  <td><input type="text" class="numValue" value="" /></td>
</tr>
<tr>
  <td>
    <select class="dates">
        <option value="1/1/11" data-value="num1">1/1/11</option>
        <option value="1/2/11" data-value="num2">1/2/11</option>
        <option value="1/3/11" data-value="num3">1/3/11</option>
    </select>
  </td>
  <td>
  <input type="text" class="numValue" value="" />
  </td>
</tr>
</tbody>
</table>

моя проблема здесь в том, что когда я добавляю новую строку с помощью функции addnewrow (), функция выбора не работает с добавленной новой строкой, но функция выбора работает префектом со статической строкой, почему это так?случиться?Пожалуйста, помогите мне, я все еще учусь, я хочу, когда я добавляю новую строку с помощью функции addnewrow (), заранее выберите работу ввода.

Answer 1

Чтобы получить следующий input для выбора, используйте $(this).next('input.numValue')

$('select.dates').change(function() {
   $(this).next('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
});

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

<select class="dates">
    <option value="1/1/11" data-value="num1">1/1/11</option>
    <option value="1/2/11" data-value="num2">1/2/11</option>
    <option value="1/3/11" data-value="num3">1/3/11</option>
</select>
<input type="text" class="numValue" value="num1" />

<select class="dates">
    <option value="1/1/11" data-value="num1">1/1/11</option>
    <option value="1/2/11" data-value="num2">1/2/11</option>
    <option value="1/3/11" data-value="num3">1/3/11</option>
</select>
<input type="text" class="numValue" value="num1" />

После обновления OP

• Событие привязки к динамически генерируемым элементам youнеобходимо использовать $(document).on('change' , 'select.dates' , function(){ })
• Чтобы получить связанный ввод $(this).closest('tr').find('input.numValue') получить родительскую строку, а затем найти ввод

$(document).ready(function(){
  $('#add').click(addnewrow); // add row click event
  $(document).on('change','select.dates',function() { // select change event
      $(this).closest('tr').find('input.numValue').val($(this.options[this.selectedIndex]).attr('data-value'));
  });
});


function addnewrow()   
{  
  var n=($('.table tr').length-0)+1;  
  var tr = '<tr>'+ 
  '<td><select class="dates"><option value="select" data-value="">select</option><option value="value1" data-value="500">value1</option><option value="value2" data-value="300">value2</option><option value="value3" data-value="250">value3</option></select>'+
  '<td><input type="text" class="numValue" value="" /></td>'+
  '</tr>';  
  $('.detail').append(tr);

}

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

<table class="table">
   <thead>
    <th><input type="button" value="+" id="add" class="btnbtn-primary"></th>  
    <th>select</th>
    <th>value</th>
  </thead>
  <tbody class="detail">
    <tr class="row">
      <td>
        <select class="dates">
        <option value="select" data-value="">select</option>
        <option value="value1" data-value="500">value1</option>
        <option value="value2" data-value="600">value2</option>
        <option value="value3" data-value="900">value3</option>
        </select>
      </td>
      <td>
        <input type="text" class="numValue" value="" />
      </td>
    </tr>
    <tr>
      <td>
        <select class="dates">
        <option value="select" data-value="">select</option>
        <option value="value1" data-value="500">value1</option>
        <option value="value2" data-value="300">value2</option>
        <option value="value3" data-value="250">value3</option>
        </select>
      </td>
      <td>
        <input type="text" class="numValue" value="" />
      </td>
    </tr>
    <tr>
      <td>
        <select class="dates">
        <option value="select" data-value="">select</option>
        <option value="value1" data-value="500">value1</option>
        <option value="value2" data-value="300">value2</option>
        <option value="value3" data-value="250">value3</option>
        </select>
      </td>
      <td>
        <input type="text" class="numValue" value="" />
      </td>
    </tr>
  </tbody>
</table>