如何更改每個點擊功能的ID值

Question

在這裏我有一個代碼，其中工作是在每個點擊函數一個新行生成，每個有ID值，並從該值我需要得到的結果該行中的另一列。

$("#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); 
     }); 
    }); 
}); 

這裏只有第一行受到影響。

Answer 1

這裏只有第一行受到影響。這是預期的行爲，因爲標識符必須是唯一的。

但是你可以指定一個CSS類，它們即branch_ids和Event Delegation使用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); 
    }); 
}); 

注意綁定的事件處理程序：在地方的document你應該用最接近的靜態容器。