Question

我的表中包含大量数据，因此我正在使用jQuery DataTables。现在，我在表中有一个select下拉列表：在第一页上，带脚本的select下拉列表正在工作，在第二页上，当我从下拉列表中选择数据时，警报未显示。这是我的fiddle。

代码：

$("#example").dataTable();

$(".opt_value").on("change", function() {
  alert("===11===");
  alert($('option:selected', this).val());
});

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<table id="example">
  <thead>
    <tr>
      <th>Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="opt_value" name="opt">
          <option value="">STATUS</option>
          <option value="aa">aa</option>
          <option value="bb">bbb</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="col-md-2 text-center">
          <select class="opt_value" name="opt">
            <option value="">STATUS</option>
            <option value="aa">aa</option>
            <option value="bb">bbb</option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>

任何人都可以提前建议如何做。

Answer 1

您应将事件附加到dynamic added objects的文档上：

jQuery(document).on("change",".opt_value", function(){
     alert("===11===");
     ...
});

这是工作中的fiddle

Answer 2

用以下代码替换您的jQuery代码，并且事件处理程序应位于document

jQuery(document).on('change', '.opt_value', function() {
    alert('===11===');
    alert( $('option:selected', this).val() );                
});

或者，您也可以使用

jQuery('body').on('change', '.opt_value', function() {
    alert('===11===');
    alert( $('option:selected', this).val() );                
});

Answer 3

在创建第二页的行之前，在之前附加更改事件处理程序。因此，他们的变化不被听取。因此，您必须为所有表附加事件处理程序功能，并使用event bubbling。

$("#example").dataTable();
$("#example").on("change", ".opt_value", function() {
  alert("===11===");
  alert($('option:selected', this).val());
});

数据表：将.select事件添加到第二页

3 个答案: