jQuery selector when a table is created dynamically

Question

我有一个表(在运行时生成)和一个下拉列表。在页面打开之前，该表不存在。一旦页面打开，表格和下拉列表看起来就像这个小提琴：

$("#aDropDown").val($("WhatToPutHere?").text());

我正在尝试执行以下操作：当用户选择"选择"按钮时，我需要下拉选择的项目来匹配行的"类型"。

任何例子都将不胜感激。

谢谢Mike

Answer 1

首先，您有多个id相同的按钮。它们应该共享一个类。

<button class="aButton">Select</button>

接下来，您想要的是上一个<td>的.text()

$('.aButton').on('click', function() {
var type = $(this).closest('td').prev('td').text();
$("#aDropDown").val(type);
});

JSFIDDLE正如@Mackan所指出的，如果您不使用delegated事件，因为您正在动态创建表。在这种情况下，以下代码会更好地工作：

$(body).on( 'click', '.aButton' , function() {
var type = $(this).closest('td').prev('td').text();
$("#aDropDown").val(type);
});

Answer 2

$('.aButton').click(function(e) {
var btn = $(e.target);
$("#aDropDown").val(btn.data('category'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<td>item</td>
<td>Type</td>
<td>Action</td>
</thead>
<tr>
<td class="anItem">Apple</td>
<td class="aType">Fruit</td>
<td>
<button class="aButton" data-category="Fruit">Select</button>
</td>
</tr>
<tr>
<td class="anItem">Orange</td>
<td class="aType">Fruit</td>
<td>
<button class="aButton" data-category="Fruit">Select</button>
</td>
</tr>
<tr>
<td class="anItem">collard</td>
<td class="aType">Veggie</td>
<td>
<button class="aButton" data-category="Veggie">Select</button>
</td>
</tr>
</table>
<br/>
<br/>aDropDown:
<select id="aDropDown">
<option value="Fruit">Fruit</option>
<option value="Veggie">Veggie</option>
</select>

删除了每个按钮的id属性(id应用于唯一元素)。

为每个按钮添加了一个按钮类。

Answer 3

如上所述，您的代码必须在某个事件上运行。以下是我如何用最少的标记更改(只是按钮上的一个类)来完成它：

$('.selectBtn').click(function() {
var myVal = $(this).closest('tr').find('.aType').text();
console.log(myVal);
$("#aDropDown").val(myVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<td>item</td>
<td>Type</td>
<td>Action</td>
</thead>
<tr>
<td class="anItem">Apple</td>
<td class="aType">Fruit</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
<tr>
<td class="anItem">Orange</td>
<td class="aType">Fruit</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
<tr>
<td class="anItem">collard</td>
<td class="aType">Veggie</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
</table>
<br/>
<br/>aDropDown:
<select id="aDropDown">
<option value="Fruit">Fruit</option>
<option value="Veggie">Veggie</option>
</select>

Answer 4

既然您说您的表是动态创建的，那么您应该使用绑定到持久元素，使用委派事件(如document或body)：

委派事件的优势在于，它们可以处理以后添加到文档中的子元素中的事件。通过选择在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序

所有其他答案(编写时)都使用绑定，将事件处理程序添加到实际按钮中。这意味着，如果按钮不存在，或者被临时删除，绑定将丢失，或者无法创建。

使用委托事件：

$(document).on('click', '.aButton', function() {

或。。

$('body').on('click', '.aButton', function() {

还要注意，上面的绑定使用了一个类选择器.aButton，因为id必须是唯一的(而您的id则不是)。

<button class="aButton">Select</button>

jsFiddle上的完整示例：

$(document).on('click', '.aButton', function() {
$("#aDropDown").val($(this).parent().prev('td').text());
});

编辑：
如果表结构有更改的危险(添加更多的td或tr)，下面的脚本将更善于找到正确的td(按类别.aType)：

$(document).on('click', '.aButton', function() {
$("#aDropDown").val($(this).closest('tr').find('.aType').text());
});