Почему атрибут data на HTML 5 возвращает значение undefined?

Question

При получении значения атрибута data возникает возникает ошибка из-за значения undefined.

На этом участке кода значение атрибута data верное: url: '/moderator/comment/' + $( this ).data( 'id' ) + '/delete', а здесь и далее уже undefined: alert( "#comment" + $( this ).data( 'id' ) );

$("[id^=comment_delete]").on("click", function() {
  $.ajax({
    type: 'GET',
    url: '/moderator/comment/' + $(this).data('id') + '/delete',
success: function(msg) {
  alert("#comment" + $(this).data('id'));
  $("#comment" + $(this).data('id')).detach();
}

});
});

#comment_delete {
  width: 100px;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comment100500" class="panel panel-default" data-id="100500">
  <div id="comment_delete100500" data-id="100500" class="btn btn-danger" data-href="/moderator/comment/100500/delete"><i class="fa fa-remove"></i>Delete</div>
  <p>Комментарий</p>
</div>

Answer 1

Если вы запустите сниппет ниже, то в консоли увидите, что вы пытаетесь получить данные у объекта, на который ссылается this, в то время как объектом является не div, а функция ajax-запроса, так как именно она в этот момент является тем, на что должен ссылаться this в этой области видимости.

Чтобы же получить нужную вам информацию, вам нужно (можно) прибегнуть к тому способу, как я привел там же, а именно сохранить ссылку на нужный вам div в переменной btn, и потом использовать именно ее. Ну или еще как-то обращаться именно к этому объекту, а не к иному.

$("[id^=comment_delete]").on("click", function() {
  var btn = this;
  $.ajax({
    type: 'GET',
    url: '/moderator/comment/' + $(this).data('id') + '/delete',
complete: function(msg) {
  console.log(this);
  alert("#comment" + $(btn).data('id'));
  $("#comment" + $(this).data('id')).detach();
}

});
});

#comment_delete {
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comment100500" class="panel panel-default" data-id="100500">
  <div id="comment_delete100500" data-id="100500" class="btn btn-danger" data-href="/moderator/comment/100500/delete"><i class="fa fa-remove"></i>Delete</div>
  <p>Комментарий</p>
</div>