не работает Multi AJAX код

Question

Привет У меня проблема при запуске кода, второй код не будет работать. Однако, когда второй код должен выполняться каждый раз, когда код все еще работает. Первый код добавляет значение для базы данных и повторной работы базы данных, а вторая сумма кода удаляется из таблицы, но только сумма, которая была удалена из среды.

моя проблема в jQuery не выполняется на div, загруженном ajax!

Как связать событие click с динамически добавленным элементом для этого кода? Как решить эту проблему ??

первый код:

<script> 
      $('#submit').on('click', function (e) { 
       e.preventDefault(); 
       var data = $('#create').serialize(); 
       $.ajax({ 
        headers: { 
         'X-CSRF-Token': $('input[name="_token"]').val() 
        }, 
        type: 'post', 
        url: '{!! URL::route('category') !!}', 
        data: data, 
        success: function (data) { 
         var dataDelete = 'category/' + data.id + '/delete'; 
         var dataCat = data.cat; 
         var dataId = data.id; 
         $('#append').load('loadCat'); 
        }, 
        error: function (xhr, status, errorThrown) { 
         alert(JSON.parse(xhr.responseText).category[0]); 
        } 

       }); 
       jQuery("#create").val(''); 
      }); 
     </script> 

Второго:

<script> 
     $('[data-delete]').on('click', function (e) { 
      e.preventDefault(); 
      var this_ = $(this); 
      var token = $('input[name="_token"]').attr('value'); 
      var id = $(this).data("id"); 
      $.ajax(
        { 
         url: "{{ url('/category') }}" + '/' + id + '/delete', 
         type: 'post', 
         dataType: "JSON", 
         data: {"id": id, '_token': token}, 
         success: function (data) { 
          $(this_).parent().parent().remove(); 
         } 
        }); 
      console.log("It failed"); 
     }); 
    </script> 

Answer 1

Это может быть потому, что вы являетесь обязательными для события нажатия на динамически генерируемый элементе.

Вам нужно сделать что-то ссылку

$("#parent_id_or_class").on('click','.dynamicAddedElement_id_class',function(){ 
// Code logic 

}); 

Более подробно посетить jQuery:How to bind click event on dynamically added element

Answer 2

этим кодом моя проблема решена.

$('body').on('click', '[data-delete]',function (e) { 
      e.preventDefault(); 
      var this_ = $(this); 
      var token = $('input[name="_token"]').attr('value'); 
      var id = $(this).data("id"); 
      $.ajax(
        { 
         url: "{{ url('/category') }}" + '/' + id + '/delete', 
         type: 'post', 
         dataType: "JSON", 
         data: {"id": id, '_token': token}, 
         success: function() { 
          $(this_).parent().parent().remove(); 
         } 
        }); 
      console.log("It failed"); 
     });