Appended row to the table by Jquery not working

Question

I am using jquery to append a row after ajax success

the new row has two buttons one for edit and the other for delete each has a unique id from the Laravel @foreach

the appended proccess works fine but the buttons in the new row not working unless i refresh the page

Code:

@extends('admin.master')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header bg-light" id="nationality-card-header">
            <div class="d-flex justify-content-between align-items-center">
              <form id="myForm">
                <div class="input-group" dir="ltr">
                  <div class="input-group-prepend">
                    <button class="btn btn-success" id="save-nationality">
                      <i class="fas fa-plus"></i>
                    </button>
                  </div>
                  <input type="text" class="form-control text-right"
                         name="nationality"
                         placeholder="{{ __('site.add_nationality') }}">
                </div>
              </form>
              <h5 id="title-content">{{ __('site.nationalities') }}</h5>
            </div>
            <div id="error-nationality" class="text-danger"></div>
          </div>

          <div class="card-body">
            <table id="nationality-table" class="table table-borderless table-sm table-striped">
              <tbody>
              @foreach($nationalities as $nationality)
                <tr>
                  <td>
                    <input type="text" class="form-control" id="nationality-name-{{ $nationality->id }}"
                           value="{{ $nationality->name }}">
                    <div id="error-nationality-{{ $nationality->id }}" class="text-danger"></div>
                  </td>
                  <td class="float-right">
                    <a class="btn btn-outline-info btn-sm edit-nationality"
                       id="{{ $nationality->id }}"> {{ __('site.edit') }}</a>
                    @if($nationality->users_count == 0)
                      <a class="btn btn-outline-danger btn-sm del-nationality"
                         id="{{ $nationality->id }}">{{ __('site.delete') }}</a>
                    @endif
                  </td>
                </tr>
              @endforeach

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
 @endsection

 @section('scripts')

  <script>
    $(function () {
      let CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
      $("#myForm").on('submit', function (e) {
        e.preventDefault();
        let nationality = $("input[name='nationality']").val();
        let url = '{{ route('owner.nationalities.store') }}';

        let myData = {
          _token: CSRF_TOKEN,
          name: nationality,
        }
        $.post({
          url: url,
          data: myData,
          success: function (response) {
            let table_row = ' <tr>\n' +
              '                  <td>' +
              '                    <input type="text" class="form-control" value="' + response.name + '">' +
              '                  </td>' +
              '                  <td class="float-right">' +
              '                    <a class="btn btn-outline-info btn-sm edit-nationality" id="' + response.id + '"> {{ __('site.edit') }}</a>' +
              '                    <a class="btn btn-outline-danger btn-sm del-nationality" id="' + response.id + '">{{ __('site.delete') }}</a>' +
              '                  </td>' +
              '                </tr>'
            // $('#nationality-table tbody').append(table_row).html();
            $('#nationality-table tbody').append(table_row).children(':last').hide().fadeIn(500);
          },
          error: function (response) {
            console.log(response);
          }
        });
      });

      $('.edit-nationality').on('click', function () {
        let id = $(this).attr('id');
        let name = $("#nationality-name-" + id).val();
        let myData = {
          _token: CSRF_TOKEN,
          id: id,
          name: name,
        }
        console.log(myData);
        let url = '{{ route('owner.nationalities.update') }}';
        $.ajax({
          type: 'post',
          dataType: 'json',
          data: myData,
          url: url,
          success: function () {
            console.log(response);
          },
          error: function (response) {
            console.log(response);
          }
        });
      })



      $('.del-nationality').on('click', function () {
        let id = $(this).attr('id');
        let tr = $(this).closest('tr');
        let myData = {
          _token: CSRF_TOKEN,
          id: id,
        }
        console.log(myData);
        let url = '{{ route('owner.nationalities.delete') }}';
        $.ajax({
          type: 'post',
          data: myData,
          url: url,
          success: function () {
            tr.fadeOut(500, function () {
              $(this).remove();
            });
            console.log(response);
          },
          error: function (response) {
            console.log(response);
          }
        });
      })
    });
  </script>
  @stop

Answer 1

check if it works by using following code in click events:

$(document).on('click','.edit-nationality', function () {
  //Your Code
});

$(document).on('click','.del-nationality', function () {
  //Your Code
});