Question

我想在带有选项更改的输入值中获取选择选项数据属性值。我尝试了以下与第一个tr一起使用的方法，但是在添加另一个tr时无法在select上使用。

var i=$('table tr').length;
    $("#add").on('click',function(){
    	html = '<tr>';
    	html += '<td><select  class="fruits"> <option value="Apple" data-val="3">Apple</option>  <option value="Orange" data-val="8">Orange</option> <option value="Banana" data-val="7">Banana</option> </select> <input type="text" class="fet"></td>';
    	html += '</tr>';
    	$('table').append(html);
    	i++;
    });

$('.fruits').on('change', function() { 
    $(this).next().val($("option:selected",this).data('val')); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
       <tr>
          <td>
             <select  class="fruits">
                <option value="Apple" data-val="3">Apple</option>
                <option value="Orange" data-val="8">Orange</option>
                <option value="Banana" data-val="7">Banana</option>
             </select>
          <input type="text" class="fet">
          </td>
       </tr>
       <tr>
    </table>
    <button type="button" id="add"> Add </button>

Answer 1

更改您的

let task = AF.request(url)
task.responseData { response in
   print(task.debugDescription)
}

收件人

$('.fruits').on('change', function() { 
   $(this).next().val($("option:selected",this).data('val')); 
});

会发生什么

执行代码$(document).on('change', '.fruits', function() { $(this).next().val($("option:selected",this).data('val')); });时，只会将事件绑定到DOM中存在的元素。

因此，当您动态添加元素时，不会绑定事件。

因此，在绑定jquery上的change事件时，将其绑定到.fruits。因此该事件应与动态添加的元素绑定

document

var i=$('table tr').length;
    $("#add").on('click',function(){
    	html = '<tr>';
    	html += '<td><select  class="fruits"> <option value="Apple" data-val="3">Apple</option>  <option value="Orange" data-val="8">Orange</option> <option value="Banana" data-val="7">Banana</option> </select> <input type="text" class="fet"></td>';
    	html += '</tr>';
    	$('table').append(html);
    	i++;
    });

$(document).on('change', '.fruits', function() { 
    $(this).next().val($("option:selected",this).data('val')); 
});

如何在下一个输入元素中获取选择选项数据

1 个答案: