Q: Не работает подсветка строки таблицы, после динамического создания через AJAX? 

$(document).ready(function() {

  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
      books_id = [];
      titles = [];
      $(data).each(function(index, value) {
        // if(value.completed)
        titles[index] = "<td>" + JSON.stringify(value.title) + "</td>";
        books_id[index] = "<td>" + JSON.stringify(value.id) + "</td>";
        $("#waypointsTable").append("<tr>" + titles[index] + books_id[index] + "</tr>");
      });
    }
  });

  $('#waypointsTable tr').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
})
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
  text-align: left;
}

th {
  padding: 5px;
  text-align: center;
}

.hover { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <table style="width:50%" id="waypointsTable">
    <caption><b>Sort from JSON to table with jQuery</b></caption>
    <tr>
      <th>Title</th>
      <th>ID</th>
    </tr>
  </table>
</body>



A: Используй css
tr:hover { background-color:yellow; }

Если все таки через jq


$(document).ready(function() {

  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/todos/',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
      books_id = [];
      titles = [];
      $(data).each(function(index, value) {
        // if(value.completed)
        titles[index] = "<td>" + JSON.stringify(value.title) + "</td>";
        books_id[index] = "<td>" + JSON.stringify(value.id) + "</td>";
        $("#waypointsTable").append("<tr>" + titles[index] + books_id[index] + "</tr>");
      });
    }


  });
  
$(document).on({
    mouseenter: function () {
        $(this).addClass('hover');
    },
    mouseleave: function () {
        $(this).removeClass('hover');
    }
}, "#waypointsTable tr");

})
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}

th {
  padding: 5px;
  text-align: center;
}

.hover {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <table style="width:50%" id="waypointsTable">
    <caption><b>Sort from JSON to table with jQuery</b></caption>

    <tr>
      <th>Title</th>
      <th>ID</th>
    </tr>
  </table>

</body>


