0

I have a table with live search on it. There is a link in this table that opens a modal where some changes can be made. The modal works when no search is made. But when searching, emptying the table contents, I print the data coming to ajax to the table. Unfortunately, the link that opens modal, does not open modal

This is the link I printed with jQuery:

<a class="show-modal btn btn-warning btn-sm interview-add" customer-id="'.$data->customer_id.'" href="javascript:void(0)"><i class="fas fa-plus text-white"></i></a>

This is the jQuery code:

$('.interview-add').click(function (e) {
        e.preventDefault();
        var customerId = $(this)[0].getAttribute('customer-id');
        $('#interview-customer').val(customerId);
        $('#interview-add').modal('show');
})

This is the code where I printed the incoming data:

$('#search-button').click(function (e) {
  e.preventDefault();
  var searching = $("#search").val();
  if(searching === '') {
            alert('');
        }else{
            $.ajax({
                url: "{{route('customerSearch')}}",
                type: "POST",
                data: {
                    searching: searching
                },
                success: function (data) {
                    $("#customers-table tbody").empty();
                    $(".pagination").remove();
                    $("#customers-table tbody").html(data);
                }
            });
        }
    });
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Taner
  • 5
  • 3

2 Answers2

0

If I understand your question correctly, the problem is that $('.interview-add').click(...) only applies the click handler to elements with the interview-add class that already exist at the time that you do that. Any expression of the form $('<some CSS selector>') performs a search for matching elements at that time, and then anything you do with the result of the search is only applied to those elements. So that would explain why this stops working for you if you dynamically repopulate the table with new elements.

The way to make this work is to use on instead. This is a method that you call on the container element that will contain the elements you're looking for (which could be either your table, or just $(document) for the page in general), and you give it a selector, an event name, and an event handler. Then, whenever that event happens to any element within that container, it will check whether the element matches the selector and if so, it calls the handler.

So, try this:

$(document).on('click', '.interview-add', function (e) {
        e.preventDefault();
        var customerId = $(this)[0].getAttribute('customer-id');
        $('#interview-customer').val(customerId);
        $('#interview-add').modal('show');
});

I used $(document) there because in your original code, you weren't restricting your selector to just .interview-add things within a specific part of the page. If you're not going to use that class for anything outside of the table then that's fine, but if you want to make it more specific you could replace $(document) with for instance $('#id-of-my-table') if the table has a unique ID.

E. Bishop
  • 156
  • 6
0

The .click() event doesn't work with dynamically added elements. For this you have to use .on('click', function(){}).

There is a really good answer on "Difference between .on('click') vs .click()", that points out some differences between those two.

Eggerd
  • 86
  • 4