Wie ändert man den ID-Wert bei jeder Klick-Funktion

Question

Hier habe ich einen Code, wo die Arbeit ist auf jeder Klick-Funktion eine neue Zeile generiert wird und jeder ID-Wert und von diesem ID-Wert muss ich das Ergebnis erhalten die andere Spalte in dieser Reihe.

$("#addrow").click(function() { 
    $(".item-row:last").after('<tr class="item-row"><td class="description">' + 
     '<select class="form-control select2" name="branch" id="branch_ids"">' + 
     '<option value="">Choose Branch</option><?php foreach ($branch as $val) {?>' + 
     '<option value="<?php echo $val->id; ?>"><?php echo $val->name; ?></option><?php } ?></select>' + 
     '</td><td><textarea name="amount[]" id="amounts" class="cost textarea" required></textarea></td></tr>'); 

    $("#branch_ids").change(function() { 
     var branch = $(this).val(); 
     var url = "<?php echo base_url();?>bills/get_corresponding_code"; 
     $.post(url, { branch: branch }, function (data) { 
      $('#amounts').html(data); 
     }); 
    }); 
}); 

Hier wird nur die erste Zeile betroffen.

Answer 1

Hier wird nur die erste Zeile betroffen. Dies ist das erwartete Verhalten, da die IDs in eindeutig sein müssen.

auch immer Sie eine CSS-Klasse zu ihnen zuweisen heißt branch_ids und Event Delegation Event-Handler mit dem Class Selector (".class")

$("#addrow").click(function() { 
    $(".item-row:last").after('<tr class="item-row"><td class="description">' + 
      '<select class="form-control select2 branch_ids" name="branch">' + 
      '<option value="">Choose Branch</option><?php foreach ($branch as $val) {?>' + 
      '<option value="<?php echo $val->id; ?>"><?php echo $val->name; ?></option><?php } ?></select>' + 
      '</td><td><textarea name="amount[]" class="cost textarea amounts" required></textarea></td></tr>'); 
}); 

$(doument).on('change', '.branch_ids', function() { 
    var branch = $(this).val(); 
    var amount = $(this).closest('item-row').find('.amounts'); 

    var url = "<?php echo base_url();?>bills/get_corresponding_code"; 
    $.post(url, { 
     branch: branch 
    }, function(data) { 
     amount.html(data); 
    }); 
}); 

Hinweis zu binden: Anstelle von document sollten Sie am nächsten statischen Behälter verwenden.