如何获得比选择输入更多的数据属性？

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更新后

• 要binding event on dynamically generated elements，您需要使用$(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>