Question

- UPDATE -

这是我的jsfiddle：

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

<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)
});

选择不使用数据表的选项下拉列表

2 个答案: