如何将动态数据属性值添加到按钮和由 repeater.js 生成的 div

Question

我正在使用 repeater.js 用一些输入字段和按钮重复 div，但问题是我想给每个 div 一个唯一的 ID，以便我可以从该特定 div 输入元素的所有字段中提取数据。

这是HTML代码：

<div class="form-group mt-repeater">
      <a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
         <i class="fa fa-edit"></i> Repeat Field
      </a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
    <div class="mt-repeater-cell">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
                        <label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
                        <label for="brand_name">e.g. Dytor</label>
                    </div>
                </div>
            </div>
             <div class="col-md-2">
                <div class="form-group">
                    <input class="form-control circle-input" id="contents" type="text" placeholder="Contents" />
                    <span class="help-block"> e.g Paracetamol </span>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
                        <label for="dose">e.g. 20 mg / 20 ml</label>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input class="form-control circle-input" id="dose_regimen" type="text" placeholder="Dose Regimen" />
                    <span class="help-block"> e.g 1-1-1-1 </span>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
                        <label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
                    </div>
                </div>
            </div>
            <div class="col-md-1 col-sm-6 col-xs-6">
                <a href="javascript:;" class="btn green-meadow mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline addData btn-circle"> <i class="fa fa-plus"></i> </a>
            </div>
            <div class="col-md-1 col-sm-6 col-xs-6">
                <a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline btn-circle"> <i class="fa fa-minus"></i> </a>
            </div>
        </div>
    </div>
</div>

每次我点击添加重传器按钮时，这个 div 都会被复制，但我还想要的是生成的新 div 应该有一个唯一的 div id 也是当前对应的它里面的元素应该有一个 class 或以该 id 开头的 id，这样特定的 div

的数据提取就很容易了

我正在使用这个 Jquery 代码：

$(".addData").on('click' ,function()
        {
            alert("hi");
        });

这是我正在使用的转发器：https://pastebin.com/n7g7tdTH

但此代码仅运行用于第一个 div，而在后来生成的动态 div 中没有运行。我也尝试编辑 repeater.js 但没有成功，因为它全是动态的，我无法理解我应该在哪里编辑该代码以为 div 和相应元素添加动态数据计数器值。

任何人都可以帮助解决这个逻辑问题吗？

Answer 1

第一个问题..

but this code only runs for the very first div on the later generated dynamic divs it doesn't run

您可以将 jquery 事件转换为委托事件。这些允许您根据选择器捕获 DOM 元素上的事件，因此当添加新的 DOM 元素时，这些也被抓住了。

所以 -> $(".addData").on('click' ,function()

委托事件变为 -> $(document.body).on("click",".addData" ,function()

第二个问题。

but how to get the values from the input field that are present near that button

这可以通过向上遍历 DOM 树到包含所需元素的父元素来实现。例如。 .row 或 mt-repeater-cell，只要它是包含您要查找的元素的 DOM 元素即可。在这里你可以使用 jquery 的 closest 选择器，它将向上遍历树直到找到你之后的元素。

所以 -> $(this).closest('.row').find('#dose_regimen').val()

上面会向上遍历DOM树，直到找到.rowclass，然后我们找到id为dose_regimen等的元素，..#dose_regimen 最后用 .val()

得到它的值

Answer 2

另一种检索字段值的方法是将所有输入字段 id 重命名为 name （下面的示例）并使用 repeater.js repeaterVal() 获取所有字段值 .

$(".mt-repeater").repeater();

$("#getVal").click(function () {
 $('.mt-repeater').repeaterVal()["group-b"].map(function(fields){
                //fields contain the collection of input fields per row
  console.log(fields["dosage_form"]);
  console.log(fields["brand_name"]);
  //....
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="form-group mt-repeater">
<a href="javascript:;" data-repeater-create class="btn btn-circle purple mt-repeater-add">
<i class="fa fa-edit"></i> Repeat Field
</a>
<div data-repeater-list="group-b">
<div data-repeater-item class="mt-repeater-item">
 <div class="mt-repeater-cell">
  <div class="row">
   <div class="col-md-2">
    <div class="form-group">
     <div class="input-group">
      <input type="text" name="dosage_form" class="form-control typeahead-findings circle-input" placeholder="Dosage Form">
      <label for="dosage_form">e.g. Tablet / Syrup / Capsule etc.</label>
     </div>
    </div>
   </div>
   <div class="col-md-2">
    <div class="form-group">
     <div class="input-group">
      <input type="text" name="brand_name" class="form-control typeahead-findings circle-input" placeholder="Brand / Generic Name">
      <label for="brand_name">e.g. Dytor</label>
     </div>
    </div>
   </div>
   <div class="col-md-2">
    <div class="form-group">
     <input class="form-control circle-input" nam="contents" type="text" placeholder="Contents" />
     <span class="help-block"> e.g Paracetamol </span>
    </div>
   </div>
   <div class="col-md-2">
    <div class="form-group">
     <div class="input-group">
      <input type="text" name="dose" class="form-control typeahead-findings circle-input" placeholder="Dose">
      <label for="dose">e.g. 20 mg / 20 ml</label>
     </div>
    </div>
   </div>
   <div class="col-md-2">
    <div class="form-group">
     <input class="form-control circle-input" name="dose_regimen" type="text" placeholder="Dose Regimen" />
     <span class="help-block"> e.g 1-1-1-1 </span>
    </div>
   </div>
   <div class="col-md-2">
    <div class="form-group">
     <div class="input-group">
      <input type="text" name="therapy_duration" class="form-control typeahead-findings circle-input" placeholder="Therapy Duration">
      <label for="therapy_duration">e.g. 1 Day / 1 Month etc.</label>
     </div>
    </div>
   </div>
   <div class="col-md-1 col-sm-6 col-xs-6">
    <a href="javascript:;" class="btn green-meadow mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline addData btn-circle"> <i class="fa fa-plus"></i> </a>
   </div>
   <div class="col-md-1 col-sm-6 col-xs-6">
    <a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline btn-circle"> <i class="fa fa-minus"></i> </a>
   </div>
  </div>
 </div>
</div>

<button id="getVal">Get Value</button>

如何将动态数据属性值添加到按钮和由 repeater.js 生成的 div

How to add dynamic data attribute value to a button and a div generated by repeater.js

html

javascript

jquery

repeater