将Item附加到容器的问题

Question

我正在尝试将新项目和价格（两个输入字段）附加到容器中。我尝试在父元素中添加一个类，而不是同时添加两个项。

出于某种原因，我无法完成这项工作。

＆＃13;

＆＃13;

'use strict';

$(document).ready(init);

function init(){
	// $('#groupOne').on('click', '.item', clickHolder);
	// $('#groupOne').on('click', '.item', clickCup);
	$('#addButton').on('click', '.addItem', addFunction);
}

function addFunction(){
	var item = $('.addItem').val();
	console.log(item);
	var placeIt = $('<td>' + item + '</td>');
	('#groupOne').appendItem;
	$('.addItem').val('');
}

＆＃13;

		<input type="text" class="addItem">
		<input type="number" class="addItem">
		<button id="addButton">Add</button>
	</div>
	<table id="groupOne">
		<tr>
			<th>Item</th>
			<th>Price</th>
		</tr>
		<tr class="item">
			<td>Banana</td>
			<td>14.99</td>
		</tr>
		<tr class="item">
			<td>Apple</td>
			<td>5.99</td>
		</tr>
		<tr class="item">
			<td>Tomato</td>
			<td>8.99</td>
		</tr>
	</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有一些错误。首先，我不确定您使用事件委派的原因。然后，您只检索项目的价格。你也使用appendItem，这不是javascript方法据我所知（我在我的代码片段上使用了jquery .append()方法，因为你有jquery对象但你可以在javascript对象上使用javascript appendChild。我创建了以下代码段：

＆＃13;

＆＃13;

'use strict';

$(document).ready(init);

function init() {
  //no need to use event delegation here. click event listener is enough
  $('#addButton').on('click', addFunction);
}

function addFunction() {
  //get item name
  var itemName = $('.addItem:eq(0)').val();
  //get item price
  var itemPrice = $('.addItem:eq(1)').val();
  //create jquery object
  var placeIt = $('<tr><td>' + itemName + '</td><td>' + itemPrice + '</td></tr>');
  //append it
  $('#groupOne').append(placeIt);
  $('.addItem').val('');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="addItem" />
<input type="number" class="addItem" />
<button id="addButton">Add</button>
<table id="groupOne">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr class="item">
    <td>Banana</td>
    <td>14.99</td>
  </tr>
  <tr class="item">
    <td>Apple</td>
    <td>5.99</td>
  </tr>
  <tr class="item">
    <td>Tomato</td>
    <td>8.99</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;