ajax в ajax не работает

Question

Я загружаю php-выход в div с помощью ajax на странице (jobs.php), этот результат обновляется каждые несколько секунд, чтобы показать обновленный список записей из sql.

Я пытаюсь использовать ajax для удаления выбранной записи, это отлично работает на отдельной странице, однако, когда я пытаюсь сделать это с страницы jobs.php, ничего не происходит.

$(function() { 
    $('.trash').click(function() { 
     var del_id = $(this).attr('id'); 
     var $ele = $(this).parent().parent(); 

     $.ajax({ 
      type: 'POST', 
      url: 'deleterecord.php', 
      data: {del_id: del_id}, 
      success: function (data) { 
       if (data == "YES") { 
        $ele.fadeOut().remove(); 
       } else { 
        alert("record could not be deleted") 
       } 
      } 
     }); 
    }); 
}); 

deleterecord.php

$delid = $_POST['del_id']; 

$query5 = "DELETE from Records WHERE id = '$delid'"; 
$sql5 = mysqli_query($connection, $query5) or die(mysqli_connect_error()); 

if(isset($sql5)) { 
    echo "YES"; 
} else { 
    echo "NO"; 
} 

jobs.php

<script type="text/javascript"> 
    refreshdiv(); 
</script> 

какие-либо предложения о том, где я мог бы идти неправильно ??

function refreshdiv() { 

    // The XMLHttpRequest object 

    var xmlHttp; 
    try { 
     xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari 
    } catch (e) { 
     try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
     } catch (e) { 
      try { 
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 
       alert("Your browser does not support AJAX."); 
       return false; 
      } 
     } 
    } 
} 

Answer 1

Поскольку кнопки удаления загружаются динамически, вам необходимо использовать делегированные события.
Поэтому нам нужно привязать событие click к родительскому элементу, который существует во время загрузки,
ex body.

Заменить этот

$('.trash').click(function() { 

С этой

$('body').on('click','.trash',function(){