Question

我怎么能这样做，以便下面的代码保留现在的功能，但执行以下操作：

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

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

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" - ＆gt; class="addMenu"。

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

关于您的复制问题，请将要复制的元素的模板放在脚本标记内，并使用可以引用和克隆的ID（使用.html()），或者更好的是考虑查看{{3 }或http://handlebarsjs.com/。

单击链接创建新表单

1 个答案: