javascript - 为 jQuery 中动态创建的按钮提供不同的 ID

Question

我正在尝试使用 jQuery 创建一组文本框并给它们提供 id。我只需要提供 id 文本框。

它不必与我现在提供的 ID 相同，可能还有其他 ID。我不知道怎么办。有什么可以帮忙的吗？

var cT = '<hr>';
cT += ' <div id="divMessageProfile"></div>';
cT += ' <div class="form-group" id="modalStockAdd" >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <label class="pull-left">Barkod No</label> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <label class="pull-left">Adet</label> ';
cT += ' </div >';
cT += ' </div >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> ';
cT += ' </div >';
cT += ' </div >';
cT += ' </div >';

jQuery(document).on('click', '#btnContinue', function () {
    $('#modalStockAdd').append(
          ' <div class="col-lg-9 col-sm-9" >'
        + ' <label class="pull-left">Barkod No</label> '
        + ' </div >'
        + ' <div class="col-lg-3 col-sm-3" >'
        + ' <label class="pull-left">Adet</label> '
        + ' </div >'
        + ' </div >'
        + ' <div class="row">'
        + ' <div class="col-lg-9 col-sm-9" >'
        + ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> '
        + ' </div >'
        + ' <div class="col-lg-3 col-sm-3" >'
        + ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> '
        + ' </div > '
    )
});

Answer 1

如果我理解你是对的，这将为你完成工作，只需根据你的 html 调整它即可

var number = 0;

$('button').on("click", function(){
  var html = '<p>number '+number+'</p>'
  $('#message').append(html);
  number++
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Append</button>
 <div id="message"></div>