jQuery onclick项目不追加到div

Question

在下面的代码中，它似乎没有在我已经拥有的三行"item"之外添加新的行，我似乎无法弄清楚为什么:

演示HTML:

 <div class ="formBlock menuDetails">
              <p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span></p>
              <p><span class="bookingName">Item<span class="required">*</span></span><span class="bookingInput"><input type="text" name="item" /></span></p>
              <p><span class="bookingName">Item<span class="required">*</span></span><span class="bookingInput"><input type="text" name="item"/></span></p>
              <p><span class="bookingName">Item<span class="required">*</span></span><span class="bookingInput"><input type="text" name="item"></span></p>
              <div class="appendMoreItems"></div>
              <div class="addMoreItemsButton">
              <a href="#" id="addItem">Add Item</a>
              </div>
        </div>

jQuery:

$(document).ready(function (){
  $('<div/>', {
    'class' : 'menuDetails', html: getMenuHTMLDetails()
  }).appendTo('#addMoreItemsButton');
  $('#addItem').click(function () {
    $('<div/>', {
      'class' : 'extraMenuItem', html:getMenuHTMLDetails()
    }).hide().appendTo('#menuDetails').slideDown('slow');
  });
})
function getMenuHTMLDetails()
{
  var len    = $('.extraMenuItem').length;
  var $clone = $('.menuDetails').clone();
  $clone.find('[name=item]')[0].name="item"+len;
  return $clone.html();
}

Answer 1

您应该将其附加到.menuDetails而不是#menuDetails(不存在)

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

小提琴

同样，如果你对你的标记做了一点改变，你会得到这个输出

<div class="formBlock menuDetails">
    <p><span class="bookingName">Menu<span class="required">*</span></span><span class="bookingInput"><input type="text" name="menu"/></span>
    </p>
    <p><span class="bookingName">Item<span class="required">*</span></span><span class="bookingInput"><input type="text" name="item" /></span>    
    </p>
    <p><span class="bookingName">Item<span class="required">*</span></span><span class="bookingInput"><input type="text" name="item"/></span>    
    </p>
    <p><span class="bookingName">Item<span class="required">*</span></span><span class="bookingInput"><input type="text" name="item" /></span>    
    </p>
    <div class="appendMoreItems"></div>
</div>
<div class="addMoreItemsButton"> <a href="#" id="addItem">Add Item</a></div> <!-- do not clone the this everytime -->

Answer 2

这可能对你有帮助

$(document).ready(function (){
$('#addItem').click(function(){
    var toClone = $('p:last').clone();
    $('.appendMoreItems').append(toClone);
});
});