0

My jQuery works great on the initial load of my Bootstrap Table. However, after paging forward or back it stops working even though the elements haven't changed and haven't been removed. Why?

Here is my jQuery

$(document).ready(function() {
  $(function(){
    $(".fresh-credit-update-button").click(function(){
      console.log("clicking");
      var customerId = $(this).parent().siblings(".fresh-credit-update-data").attr('id');
      var customerCreditUpdateField = $(this).parent().siblings(".fresh-credit-update-data");
      var customerCreditUpdate = customerCreditUpdateField.html('value').val();
      $.ajax({
          url: "/customers/update",
          data: {id: customerId, credit_amount: customerCreditUpdate},
          type: "POST",
          dataType: "json",
          complete: function(data) {
            console.log(data.responseJSON.credit_amount);
            customerCreditUpdateField.val("$" + data.responseJSON.credit_amount);
          },
      }); //ajax
    }); // button click
  }); // 2nd function
}); // document ready

And then here is the table its watching

<tbody>
<% @all_customers.each do |individual| %>        
      <tr>
        <td></td>
        <td><%= "#{individual.first_name} #{individual.last_name}" %></td>
        <td>
          <div class="input-group input-group-med">
            <input type="text" id="<%= individual.id %>" class="fresh-credit-update-data form-control small-field" value=<%= number_to_currency(individual.credit_amount) %>>
            <span class="input-group-btn-med">
              <button class="btn btn-med fresh-credit-update-button" type="button">Update</button>
            </span>
          </div><!-- /input-group -->
        </td>
        <td><%= number_to_currency(individual.pending_credit_amount) %></td>
        <td><%= individual.email %></td>
        <td><%= individual.accepts_marketing %></td>
        <td><%= individual.customer_status  %></td>
        <td><%= individual.tags  %></td>
      </tr>
<% end %>
</tbody>
ToddT
  • 3,084
  • 4
  • 39
  • 83
  • What error are you getting in your console window? (CTRL+SHIFT+I -> Console) – ProgrammerV5 Apr 26 '17 at 15:50
  • Are you sure that the DOM has not changed it? – Jordi Ruiz Apr 26 '17 at 15:50
  • `customerCreditUpdateField.html('value').val();` looks wrong to me. `html()` replaces the contents with HTML. The word `value` is not valid HTML. – Reactgular Apr 26 '17 at 15:51
  • No the DOM hasn't changed, and I'm using unique ID's and they are still there, and no error's in the console. Its just not working.. But like I said in the OP, it works great on the first page, and stops working on subsequent pages. – ToddT Apr 26 '17 at 15:59
  • 1
    You need to use delegated event handlers as the changing of the page content destroys the original elements (along with their event handlers) and adds new ones (with no event handlers). `$('#myTable').on('click', '.fresh-credit-update-button', function() { ... ` See the duplicate question for more information – Rory McCrossan Apr 26 '17 at 16:00
  • *" after paging forward or back it stops working even though the elements haven't changed and haven't been removed "* - they **have changed** and **have been removed** (to show the next page) – freedomn-m Apr 26 '17 at 16:01
  • @RoryMcCrossan thanks man!! That was it.. Love how this place works sometimes – ToddT Apr 26 '17 at 16:13

0 Answers0