Question

我正在尝试将输入值存储到对象中，但这些输入是使用Mustache动态生成的。我允许用户添加“治疗期”，并且每个期间我想获取数据，例如开始日期，结束日期，症状（对于症状我也允许用户通过点击按钮添加多个）当我尝试循环动态创建的处理周期div并使用.each（）方法将与一个句点关联的所有数据存储在变量中时，我无法检索与之关联的输入字段的值动态生成的ID。

下面是Mustache模板（提交按钮不属于它，因为它是静态的，所以我没有包含它，但它只是一个提交了id的div）：

      <div class="treatment-wrapper">
                    <div class="row">
                        <div class="col-lg-6">
                            <label for="start-treatment{{count}}">Start Date</label>
                            <input type="text" id="start-treatment{{count}}" name="start-treatment{{count}}" required placeholder="yyyy-mm-dd">
                        </div>
                        <div class="col-lg-6">
                            <label for="end-treatment{{count}}">End Date</label>
                            <input type="text" id="end-treatment{{count}}" name="end-treatment{{count}}" required placeholder="yyyy-mm-dd">
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <label for="symptom{{count}}">Symptoms </label>
                            <div id="symptom{{count}}-results" class="symptom-results">
                            </div>
                            <div class="field2">
                                <input type="text" class="symptom" id="symptom{{count}}" name="symptom{{count}}" required>
                                <div class="button add-symptom" id="add-symptom-{{count}}">ADD</div>
                            </div>
                        </div>
                    </div>

     </div><!-- end treatment-wrapper -->

这是JS和jQuery：

$('body').on('click','#submit',function(e){

                     //for each treatment period, get every input stored
                     var treatment_pd_info = {
                        "start_date":'',
                        "end_date":'',
                        "symptoms":[]
                     };


                     $('.treatment-wrapper').each(function(i){

                        var start_date = $("#start-treatment"+(i+1)).val();
                        var end_date = $("#end-treatment"+(i+1)).val();

                        console.log('start_date');
                        console.log(start_date);

                        var symptoms = $('#symptom'+(i+1)+'-results').find(".symptom-button").val();

                        console.log('symptoms');
                        console.log(symptoms);


                            $('#symptom'+(i+1)+'-results .symptom-results').each(function(index){
                                    console.log(index);

                             });

                     });

             });

对于上面的代码，我做了一个console.log，start_date是空白的，症状未定义，索引没有出现。有人可能会指出我正确的方向吗？

Answer 1

有两种方法 - 一种是为元素分配一个计数器，另一种是相对地获取元素。

var count = 0;
function loadMustacheTemplate(){
  var mustacheData = {}; 
  mustacheData['count'] = function(){ return ++count; }
  var html = Mustache.toHtml($("#mytemplate").html(), mustacheData);
  $("#my-container").html(html);
}

方法2：

<input type="text" class="start-treatment" 
    id="start-treatment{{count}}" 
    name="start-treatment{{count}}" required 
    placeholder="yyyy-mm-dd">

为输入分配一个新类，如上所示：

$('.treatment-wrapper').each(function(i){
  var startTreatment = $(this).child(".start-treatment").val();
});

对所有其他元素执行上述操作。

无法获取动态生成的输入值（jQuery和Mustache）

1 个答案: