0

i have modules list all the customer details in the datatable with an action of using the button.

Question: Why i can't get the id the button that i added to the row, when i click the button no alert is showing why it happens?

I have here my ajax to list all customers in the table

    $(document).ready(function(){
  $.ajax({
    url:'/logic_get_customer_data',
    type: 'GET',
    dataType: 'json',
    success:function(response) {

      var details = response.data;
      $.each(details, function (index, el) {

          var stringify = jQuery.parseJSON(JSON.stringify(el));

          var customer_name_each = stringify['customer_name'];
          var customer_address_each = stringify['customer_address'];
          var customer_email_each = stringify['customer_email'];
          var customer_number_each = stringify['customer_number'];
          var store_location_each = stringify['customer_location'];
          var customer_order_note_each = stringify['customer_order_note'];
          var customer_registered_each = stringify['customer_registered'];
          var customer_id_each = stringify['customer_id'];
          var action_each = '<button id="show_cart_button" class="btn btn-primary" type="button" value='+customer_id_each+' data-toggle="modal" data-target="#add_cart" ><i class="fas fa-cart-arrow-down"></i></button>';

          var t = $( "#tables" ).DataTable();
          t.row.add([customer_name_each,
            customer_address_each,
            customer_email_each,
            customer_number_each,
            store_location_each,
            customer_order_note_each,
            customer_registered_each,
            action_each]).draw();

        })
    }

  });
});

My Click Function to call the id

$("#show_cart_button").click(function () {
  var fired_button = $(this).val();
  alert('George');
});
Code_Ninja
  • 1,729
  • 1
  • 14
  • 38
DevGe
  • 1,381
  • 4
  • 35
  • 66
  • 1
    Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – guradio Feb 04 '19 at 06:17
  • event binding will solve this problem – guradio Feb 04 '19 at 06:17

1 Answers1

2

Because it was added after DOM. Use the on click function and target something that was in the DOM before the ajax started.

$("body").on("click", "#show_cart_button",function () {
  var fired_button = $(this).val();
  alert('George');
});
Icewine
  • 1,851
  • 1
  • 12
  • 22
  • hi @icewine, why it happens? can you explain your answer – DevGe Feb 04 '19 at 06:14
  • Also, it is preferred not to have so many buttons with same id.. in your case use a class for the button and write the button click event on the class – Abdul Hameed Feb 04 '19 at 06:18
  • If you add something dynamically(like something returned from your ajax) then when you use a standard .click function It wont be able to find it because it was added after the page had loaded. If you need to target something after the inital load, you have to first target something that was on the page from the start(In my example the body element because it is there from the start). – Icewine Feb 04 '19 at 06:18
  • for more details on delegated event check this question https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on – Abdul Hameed Feb 04 '19 at 06:19