如何設置動態創建的輸入字段的ID？

Question

我有表單字段，其輸入是由用戶根據需要動態創建的，從這些輸入字段我使用他們的id來執行實時搜索，但現在動態創建的輸入的id相同，然後使我無法使用他們的ID進行搜索，因爲它們是相同的，那麼如何爲用戶附加的輸入設置不同的ID？這裏是我的代碼

$("#new_encounter").click(function(){ 

     $("#client_info").html('<div class="table-responsive" id="div_data"><form name="add_me" id="add_me" class="form-inline" ><table id="dynamic" class="table table-bordered"><tr class="info"><th width="70%">DIAGNOSIS</th><th>ICD 10 CODE</th><tr class="info"><tr><td><input type="text" class="form-control" name="diagnosis[]" id="diagnosis" style="width:350px;" placeholder="Enter Diagnosis Keyword"/><div id="diagnosis_list"></div></td> <td><input type="text" class="form-control" name="code[]" id="code" placeholder="ICD10 CODE"/></td><td><button type="button" name="add" id="add_input" class="btn btn-success">Add</button></td></tr></table><center><input type="button" name="create_program" id="create_program" class="btn btn-success" value="SAVE"/></center></form></div>'); 
       var i=1; 
$('#add_input').click(function(){ 
i++; 

$('#dynamic').append('<tr id="row'+i+'"><td><input type="text" class="form-control" name="diagnosis[]" id="diagnosis2" style="width:350px;" placeholder="Enter Diagnosis Keyword"/><div id="diagnosis_list2"></div></td> <td><input type="text" class="form-control" name="code[]" id="code2" placeholder="ICD10 CODE"/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove btn btn-danger">Remove</button></td></tr>'); 
}); 

Answer 1

隨你的便與THR ID元素做同樣的事情，通過我的索引在id屬性

$('#dynamic').append('<tr id="row' + i + '"><td><input type="text" class="form-control" name="diagnosis[]" id="diagnosis' + i + '" style="width:350px;" placeholder="Enter Diagnosis Keyword"/><div id="diagnosis_list' + i +'"></div></td> <td><input type="text" class="form-control" name="code[]" id="code' + i + '" placeholder="ICD10 CODE"/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove btn btn-danger">Remove</button></td></tr>'); 
}); 

Answer 2

$("<input />").attr('id', ...); 

Answer 3

在這裏，你去了一個解決方案

$("#new_encounter").click(function(){ 
 
    $("#client_info").html('<div class="table-responsive" id="div_data"><form name="add_me" id="add_me" class="form-inline" ><table id="dynamic" class="table table-bordered"><tr class="info"><th width="70%">DIAGNOSIS</th><th>ICD 10 CODE</th><tr class="info"><tr><td><input type="text" class="form-control" name="diagnosis[]" id="diagnosis" style="width:350px;" placeholder="Enter Diagnosis Keyword"/><div id="diagnosis_list"></div></td> <td><input type="text" class="form-control" name="code[]" id="code" placeholder="ICD10 CODE"/></td><td><button type="button" name="add" id="add_input" class="btn btn-success">Add</button></td></tr></table><center><input type="button" name="create_program" id="create_program" class="btn btn-success" value="SAVE"/></center></form></div>'); 
 
}); 
 

 
var i=1; 
 
$(document).on('click', '#add_input', function(){ 
 
    i++; 
 
    $('#dynamic').append('<tr id="row'+i+'"><td><input type="text" class="form-control" name="diagnosis[]" id="diagnosis2" style="width:350px;" placeholder="Enter Diagnosis Keyword"/><div id="diagnosis_list2"></div></td> <td><input type="text" class="form-control" name="code[]" id="code2" placeholder="ICD10 CODE"/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove btn btn-danger">Remove</button></td></tr>'); 
 
}); 
 

 
$(document).on('click', '.btn_remove', function(){ 
 
    $(this).closest('tr').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="client_info"></div> 
 

 
<button id="new_encounter">Click Me!!!</button>

您不能在#new_encounter點擊內部有#add_input點擊事件。

由於#add_input按鈕正在動態添加，因此您需要使用事件委派。

希望這會幫助你。