DataTables: add .select event to second page

Question

I have table with lots of data so am using jquery DataTables. Now i have a select dropdown inside the table: on the first page the select dropdown with script is working, on the second page the alert is not showing when I select the data from the dropdown. Here is my fiddle.

code:

$("#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>

can anyone please suggest how to do thanks in advance.

Possible duplicate of [Jquery select change not firing](https://stackoverflow.com/questions/19194177/jquery-select-change-not-firing) — Alexander, Jul 13 '18 at 10:00

score 2 · Accepted Answer · answered Jul 13 '18 at 09:49

2

You should attach the event to the document for dynamic added objects:

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

Here the working fiddle

answered Jul 13 '18 at 09:49

T30

11,422
7
53
57

score 1 · Answer 2 · answered Jul 13 '18 at 09:49

Replace your jQuery code with the below code, and event handler should be on document

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

or, you could also use

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

Alexander · Answer 3 · 2018-07-13T10:12:11.327

1

You attach the change event handler before rows of second page have been created. Therefore, their changing is not listened. So, you have to attach the event handler function for all table and use event bubbling.

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

edited Jul 13 '18 at 10:12

answered Jul 13 '18 at 09:58

Alexander

4,420
7
27
42

DataTables: add .select event to second page

3 Answers3