javascript - 单击链接创建新表单

Question

我怎样才能让下面的代码保留它现在的功能，但执行以下操作:

a) 单击添加菜单链接/按钮时，它会显示 bookingName 菜单 div 以及相同的项目和数量框

b)当上述情况发生时，它还需要能够向刚刚添加的特定菜单添加更多行

Demo of current work

jQuery:

$(document).ready(function () {

    $('<tr/>', {
        'class': 'menuDetails',
        html: getMenuHTMLDetails()
    }).appendTo('#addMoreItemsButton');
    $('#addItem').click(function () {
        $('<tr/>', {
            html: getMenuHTMLDetails()
        }).hide().appendTo('.menuDetailsBlock').slideDown('slow');
    });
})

function getMenuHTMLDetails() {
    var $clone = $('.menuDetails').clone();

    $clone.find('[name="item[]"]')[0].name = "item";
    $clone.find('[name="qty[]"]')[0].name = "qty";
    return $clone.html();
}

HTML:

      <div class="formBlock">
            <p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
      </div>

<div class="formBlock">

<table class="menuDetailsBlock">
<tr>
<td><span class="bookingName">Item<span class="required">*</span></span></td>
<td><span class="bookingName">QTY<span class="required">*</span></td>
</tr>
<tr class="menuDetails">
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
<tr>
<td><span class="bookingInput"><input type="text" name="item[]" /></td>
<td><input type="number" name="qty[]" style="width: 50px"></span></td>
</tr>
</table>

    <div class="appendMoreItems"></div>
</div>
  <div class="formBlock">
              <a href="#" id="addItem">Add Item</a> <a href="" id="addMenu">Add Menu</a>
  </div>
        </div> 

Answer 1

您应该注意的第一件事是您的 html 无效。你不能有这样的东西:

<td><span>...</td><td>...</span></td>

由于此表单需要能够复制，因此您需要删除所有 ID(最好将其更改为类)。例如id="addMenu" -> class="addMenu"。

您应该使用委托(delegate)来处理外部容器内的任何点击，而不是使用标准点击处理程序 - 阅读 http://api.jquery.com/on/ .

对于您的重复问题，将要复制的元素的模板放置在脚本标记内，并带有您可以引用和克隆的 id(使用 .html())，或者更好的是，考虑调查http://handlebarsjs.com/或http://akdubya.github.io/dustjs/ 。