title: after using jquery datatable searching, ajax button call is not working
body: <p>I am fetching some data from my database using PHP and MySQL. I am using the <a href="https://datatables.net/" rel="nofollow noreferrer">jQuery datatables plugin</a>. In the table, there is a column containing an &quot;Add&quot; button. When the button is clicked, the Ajax method runs in the background.</p>
  <p>The button call works perfectly until I'm changing table data by table pagination, or getting data from the search option from the table. I can't get the value of the <code>data-row-id</code> upon the click on add button.</p>
  <p>Here is my PHP code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;table id=&quot;basicTable&quot; class=&quot;table table-striped table-bordered responsive&quot;&gt;
      &lt;thead class=&quot;&quot;&gt;
          &lt;tr&gt;
              &lt;th&gt;Coin No&lt;/th&gt;
              &lt;th&gt;Coin ID&lt;/th&gt;
              &lt;th&gt;Coin Symbol&lt;/th&gt;
              &lt;th&gt;Coin Name&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;?php
              $result = mysqli_query($conn, &quot; SELECT ccl.* FROM coinmarketcap_coin_list ccl WHERE SYMBOL 
              NOT IN(SELECT COIN_SYMBOL FROM fetch_coinmarketcap_coins) ORDER BY ID ASC &quot;);
              $row = mysqli_fetch_array($result);
              $i = 1;
  
              do {
          ?&gt; 
                  &lt;tr data-row-id=&quot;&lt;?php echo $row['SYMBOL']; ?&gt;&quot;&gt;
                      &lt;td&gt;&lt;?php echo $i; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row[&quot;COINMARKETCAP_ID&quot;]; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row[&quot;SYMBOL&quot;]; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row[&quot;COIN_NAME&quot;]; ?&gt;&lt;/td&gt;
                      &lt;td class=&quot;&quot;&gt;
                          &lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-warning add&quot; data-id=&quot;&lt;?php echo $row['SYMBOL']; ?&gt;&quot; style=&quot;float: none;&quot;&gt;Add&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
          &lt;?php 
                  $i++;
              } while ($row = mysqli_fetch_array($result));
          ?&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>And my client-side code</p>
  <pre><code>$(document).ready(function(){
      $('.add').on('click', function() {
          var trObj = $(this).closest(&quot;tr&quot;);
          var symbol = $(this).closest(&quot;tr&quot;).attr('data-row-id');
          // var symbol = $(this).attr('data-id');
          console.log(symbol);
          $.ajax({
              type:'POST',
              url:'addCoins.php',
              // dataType: 'json',
              data:{symbol:symbol,action:&quot;addCoinMarketCapCoin&quot;},
              success:function(data) {
                  trObj.remove();
                  $(&quot;#msg&quot;).removeClass('alert-danger');
                  $(&quot;#msg&quot;).addClass('alert-success').html(&quot;Coin &quot; +symbol+&quot; has been added successfully.&quot;);  
              }
          });
      });
  });
  </code></pre>