Question

我最初在addCommentFormListener方法中使用init中的代码并且它有效。我正在尝试将监听器附加到相关元素，如下所示：

class CommentsController {
  constructor() {
    this.$addCommentForm = $('.add-comment')
  }

  init() {
    $(".add-comment").each(function() {
        console.log('test2')
        this.addEventListener("submit", this.addCommentFormListener);
    })
  }

  addCommentFormListener() {
        e.preventDefault();
        console.log('test');
        var image = $(this).closest(".image");
        var imageId = image.find("ul").attr("id");
        var commentContents = $(this).find('input[name="comment-description"]').val();
        console.log(commentContents);
        // var imageObject = Image.all.find(image => image.id => imageId);
    }
}

控制台记录test2适当的次数，但是当我点击给定元素上的提交时，没有其他任何事情发生。我错过了什么？

另外，在submit上附加事件监听器让我觉得很奇怪，而不是因为它已经存在并且在我点击提交时被激活，但这可能只是我对Javascript听众的理解不足

编辑添加HTML：

<form id="add-comment" class="add-comment" data-id="0" action="#" method="post">
        <label for="comment-description">Comment: </label>
        <input type="text" id="comment-description-0" class="user-text" name="comment-description" placeholder="comment">
        <input type="submit" value="(+) add comment">
      </form>

Answer 1

在传递给each()的回调中，this不是您认为的那样。它是迭代中的当前元素，这就是this.addEventListener工作的原因，但当然它不能同时是CommentsController实例，所以你传递的实际回调是{ {1}}。

由于您使用的是ES6，最简单的方法是使用箭头功能：

undefined

另请注意，在init() { $(".add-comment").each((index, element) => { console.log('test2') element.addEventListener("submit", this.addCommentFormListener); }) }中，addCommentFormListener将引用事件被触发的元素，不到您的this实例。目前这个工作正常，但如果你在一个月内重新访问这段代码可能会让人感到困惑：）

为什么我的听众没有附上？

1 个答案: