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属性

中传递i索引

$('#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>

您无法在#add_input点击内进行#new_encounter点击事件。

由于动态添加了#add_input按钮，因此您需要使用事件委派。

希望这会对你有所帮助。

如何设置动态创建的输入字段的ID？

3 个答案: