jQuery AJAX load() div table after loaded buttons are not working

Question

currently having this problem, I have ajax request to send form datas and save it to database and after saving I then use load() function to refresh the list in table, but after being loaded the button inside the loaded div is not working which also uses js.

Ajax

var formData = new FormData(this);

    $.ajax({
        url: "/systemadmin/storemanagement/"+id,
        method: "POST",
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){

            console.log(data)

            $("#storeDatatable").load(location.href + " #storeDatatable");

            $(".message-error").remove();
            $(".message-success").remove();

            $('#store-update-header').append('<div class="message-success">Update succesfully</div>');

        }, error:function (err) {

            if (err.status == 422) {

                console.log(err.responseJSON);
                $(".message-error").remove();
                $(".message-success").remove();

                $.each(err.responseJSON.errors, function (i, error) {
                    $('#store-update-header').append('<div class="message-error">'+error[0]+'</div>');
                });
            }
        }
    });

Answer 1

solved by using
$(document).on('click','.toggleModal-updateStore', function(){ })
instead of
$('.toggleModal-updateStore.').on('click', function(){ })
for the buttons inside the row