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

【问题标题】：Having trouble getting values of dynamically generated input (jQuery and Mustache)无法获取动态生成的输入值（jQuery 和 Mustache）
【发布时间】：2016-10-31 01:55:07
【问题描述】：

我正在尝试将输入的值存储到一个对象中，但是这些输入是使用 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 是空白的，症状是未定义的，并且索引不显示。有人可以指出我正确的方向吗？

【问题讨论】：

使用浏览器的检查功能查看正在生成的 HTML。我的猜测是对象/模板中未定义计数。
实际上它似乎正在出现，例如我看到 Start Date
我建议获取 #start-treatment 和其他与当前正在评估的“.treatment-wrapper”相关的组件。你可以通过 $(this).child(".start-treatment") 来做到这一点。并且您将“开始治疗”类分配给输入元素
另外，您需要向我们展示呈现该 Mustache 模板的代码。它应该有一个像 var count = 0; 这样的函数。 mustacheData['count'] = function(){ return ++count;}

标签： jquery mustache

【解决方案1】：

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

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

方法二：

<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();
});

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

【讨论】：