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

Question

我最初在init方法的addCommentFormListener中包含代码，并且可以正常工作。 我正在尝试将侦听器附加到相关元素，例如：

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实例，因此您传递的实际回调是undefined 。

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

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

还要注意，在addCommentFormListener ， this将指向触发事件的元素，而不是 CommentsController实例。 这目前可以正常使用，但是如果您在一个月后重新访问此代码，可能会造成混淆：)