javascript - 使用 JQUERY 选择带有 .on ('change' ) 事件的动态插入的 Div 元素

Question

我正在尝试将 .on('change') 事件添加到作为动态插入行的一部分的 Select。 console.log(data); 返回正确的数据集。我不知道如何让它在激活选择的同一行上选择 #prototypePrice。

    $(document).ready(function() { 
    $('#lineitems').on('change', '.prototypeSelect', function() {  
        var that = $(this); 
    $.get('getItem.php?q=' + $(this).val(), function(data) { 
        console.log(data);      
        var objItem = jQuery.parseJSON(data);  
        that.closest('#prototypePrice').val(objItem.item_price); //this is wrong

      });
   });
});

这是原型(prototype)行:

 <div style="display:none;" id="rowPrototype" >                                     
 <div>
      <select id="prototypeSelect" class="prototypeSelect">

     //Select Options

      </select>
 </div>
 <div>
    <input type="text" id="prototypePrice" class="prototypePrice">
    </input>
    </div>
 </div

这是插入原型(prototype)行的 JQUERY:

 var objLineitem;       
    $(document).ready(function() {
    $('.invoiceClass').click(function() {
    $.get('getlineItems.php?q=' + $(this).attr("name") , function(data) {

         console.log(data);     

    var objLineitem = $.parseJSON(data);

    for (i=0; i < objLineitem.length; i++) {

    var newRow = $('#rowPrototype').clone();
    newRow.show();
    $('#lineitems').append(newRow);
    newRow.attr('id', 'insertedRow');
    newRow.attr('class', 'row insertedPrototypeRow');

Answer 1

它是被改变的选择的下一个兄弟的 child ，所以

$(document).ready(function () {
    $('#lineitems').on('change', '.prototypeSelect', function () {
        var that = $(this);
        $.get('getItem.php?q=' + $(this).val(), function (data) {
            console.log(data);
            var objItem = jQuery.parseJSON(data);
            that.parent().next().find('.prototypePrice').val(objItem.item_price); //this is wrong
        });
    });
});

演示:Fiddle

另请注意，如果给定结构重复，则不应使用 id对于那些元素，因为它会创建重复的 id

此外，input是一个自闭合元素，所以没有 </input>