选择选项下拉列表不适用于数据表

Question

--更新--

这是我的JSFIDDLE：

https://jsfiddle.net/18g8np7b/

我有一个jquery数据表（www.datatables.net），其中一列有一个下拉菜单。我为我的选择下拉列表分配了一个更改侦听器。我的问题是，只有当我选择了第一行上的选择下拉列表时，侦听器才会激活。我的表当前有 20 行，但更改侦听器/事件仅在更改顶行上的选择时激活。这是我的表格：

<table id="projects_table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Project Code</th>
              <th>Project Name</th>
              <th>Project Manager</th>
              <th>Client</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {{#each projects}}
            <tr>
              <td>{{projectcode}}</td>
              <td>{{projectname}}</td>
              <td>{{projectmanager}}</td>
              <td>{{client}}</td>
              <td>
                <select class="form-control" id="actions">
                  <option selected>Select action</option>
                  <option>View Details</option>
                  <option>Export to CSV</option>
                </select>
              </td>
            </tr>
            {{/each}}
          </tbody>
        </table>

这是我.js文件：

$("#actions").change(function() {
    alert('change!!'); ////only works if there's a change in the select dropdown on the first row
    console.log($(this).find("option:selected").text());
});

有人可以帮忙吗？

提前感谢！

Answer 1

尝试使用类绑定事件，id 绑定仅适用于一个元素，因为在 DOM 中不应存在多个具有相同 id 的元素。

.html：

<select class="form-control">
              <option selected>Select action</option>
              <option>View Details</option>
              <option>Export to CSV</option>
</select>

脚本：

$('.form-control').change(function() {
   console.log('change!!');
   console.log($(this).find("option:selected").text());
});

Answer 2

问题是你绑定到一个 id - 这个属性的目的是它们在 DOM 中应该是唯一的。

您要做的是创建一个类并绑定到该类。

https://jsfiddle.net/18g8np7b/5/

.HTML：

<table id="projects_table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Project Code</th>
      <th>Project Name</th>
      <th>Project Manager</th>
      <th>Client</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abcd</td>
      <td>123d</td>
      <td>
        <select class="form-control" id="actions0">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abc</td>
      <td>123</td>
      <td>
        <select class="form-control" id="actions1">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abc</td>
      <td>123</td>
      <td>
        <select class="form-control" id="actions2">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>abc</td>
      <td>123</td>
      <td>abc</td>
      <td>123</td>
      <td>
        <select class="form-control" id="actions3">
          <option>Select action</option>
          <option>View Details</option>
          <option>Export to CSV</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

.JS：

$('#projects_table').DataTable({
  responsive: true
});

$(".form-control").change(function(e) {
  alert('change!!'); //only works if there's a change in the select dropdown on the first row
  console.log($(this).find("option:selected").text());
  console.log(e.currentTarget)
});