jQuery.on ('click') показывает Window как значение $ (this) - PullRequest
Новая
       28

jQuery.on ('click') показывает Window как значение $ (this)

0 голосов
/ 02 мая 2019

Я динамически добавил контент с данными, хранящимися в кэше .data() jQuery.Когда контент создается динамически, для каждого div также имеется динамически создаваемая кнопка (обратите внимание, что каждый сгенерированный div хранит данные, упомянутые выше).Когда я пытаюсь нажать на одну из кнопок, прослушиватель событий, настроенный для события нажатия кнопки, говорит, что значение $(this) - это Window, а не кнопка, по которой была нажата.

В конечном итоге я хочу вызвать этот $(this).parent().data('commentID'), чтобы получить сохраненное значение идентификатора от родительского div, чтобы модал, который появляется в качестве подтверждения удаления, мог просто сделать AJAX-вызов URL-адреса, который заканчивается на commentID (я прокомментировализ того, что я бы назвал, если бы $(this) выбирал правильную вещь).

Вот CodePen рабочего примера.Обратите внимание, что вам придется открыть консоль разработчика, чтобы увидеть, что $(this) возвращает Window вместо кнопки, на которую вы нажали.https://codepen.io/anon/pen/pBXaKw?editors=1010

Вот HTML 

<button type="button" value="Search" class="btn btn-primary" id="searchCommentBtn">Generate comments</button>

<section id="commentsSection">

</section>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Вот JS 

$('#searchCommentBtn').click(() => {
  for(let i=0; i<4;i++) {
    let WFTComment = $('<div class="work-task-comment-div">'+i+'</div>').data('commentID', i);
    WFTComment.append('</br>', createBtn('myModal', 'Remove'));
    $('#commentsSection').append(WFTComment);
  }
});


var createBtn = (targetModal, btnName) => {
    let btn = $('<button type="button" class="btn btn-sm btn-dark removeCommentBtn" data-toggle="modal" data-target="#' + targetModal + '">' + btnName + '</button>');
    return btn;
}

$('#commentsSection').on('click', 'button', (e) => {
    console.log($(this));
    // let commentID =  $(this).parent().data('commentID');
    // $('#confirmDelete').on('click', () => {
    //   $.ajax({
    //     method: 'POST',
    //     url: 'api/CommentsAPI/' + commentId
    //   })
    // })
});

1 Ответ

0 голосов
/ 02 мая 2019

Исправление состоит в том, чтобы просто удалить функцию Arrow из прослушивателя событий и использовать традиционный вызов функции. 

$('#commentsSection').on('click', 'button', function(e) {
    console.log($(this));
    // let commentID =  $(this).parent().data('commentID');
    // $('#confirmDelete').on('click', () => {
    //   $.ajax({
    //     method: 'POST',
    //     url: 'api/CommentsAPI/' + commentId
    //   })
    // })
});
...