Question

我有一个模板

<div id="template" style="display: none;">
  <strong>Name</strong>: <span class="name"></span><br/>
  <input type="number" id="amount">  
  <button type="button" onclick="App.submit()">submit</button>         
</div>

可用于生成多个div

 for (var i = 0; i < 5; i++) {  
   var list = $('#list');
   var template = $('#template');
   template.find('.name').text(i); 
   list.append(template.html());         
 }

当从一个div中单击“提交”按钮时，如何获取其name和输入的amount值？

Answer 1

将这些元素包装在容器中，以便您可以使实例保持隔离并添加一些类，以使在该新容器实例中查找元素更加简单

请注意，您不能重复id=amount，因为id必须是唯一的。

然后委派一个点击监听器，而不是使用onclick

HTML

<div id="template" style="display: none;">
  <div class="input-row">
    <strong>Name</strong>: <span class="name"></span><br/>
    <input type="number" class="amount">
    <button type="button" class="row-submit" >submit</button>
  </div>
</div>

JS

$(document).on('click', 'button.row-submit', function(){
    // the new row wrapper
    var $row = $(this).closest('.input-row'),
        // find the elements within this row instance
        name = $row.find('.name').text(),
        amount = $row.find('.amount').val();

        // do something with the values            

        // then do your app submit
        App.submit()

});

从模板jQuery获取输入值

1 个答案: