Javascript 为什么不是'；我的听众不喜欢吗？

我最初在

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时，不会发生其他任何事情。我错过了什么

另外，让事件监听器附加在

submit

上，而不是在我点击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>

评论：

在传递给

each（）

的回调中，

这不是您所认为的。它是迭代中的当前元素，这就是为什么
this.addEventListener
可以工作的原因，但是当然，它不能同时是
CommentsController
实例，因此您传递的实际回调是
未定义的

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

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

还请注意，在
addCommentFormListener
中，
此
将引用触发事件的元素，而不是您的
CommentsController
实例。目前这一切正常，但如果您在一个月内再次访问此代码，可能会感到困惑：）
在传递给
each（）
的回调中，
这并不是您所认为的。它是迭代中的当前元素，这就是为什么
this.addEventListener
可以工作的原因，但是当然，它不能同时是
CommentsController
实例，因此您传递的实际回调是
未定义的

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

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

还请注意，在
addCommentFormListener
中，
此
将引用触发事件的元素，而不是您的
CommentsController
实例。目前这一切正常，但如果您在一个月内再次访问此代码，可能会感到困惑：）
应该有一个错误，因为
e
未定义。@Thomas说得好。。。但是没有。我不知道那是什么意思。控制台是空的，除了预期的十个“test2”副本之外。除了Thomas所说的之外，您必须在函数中添加一个参数。
e
。应该有一个错误，因为
e
未定义。@Thomas说得好。。。但是没有。我不知道那是什么意思。控制台是空的，除了预期的十份“test2”之外。除了Thomas所说的，您必须在函数中添加一个参数。我不确定我是否理解这里的所有内容。我明白为什么我最初写的东西是用
这个
来表示两种不同的东西。
索引、元素
只是为了避免这种情况，并将第一个
重命名为this
，还是有更多的内容？
索引
参数的意义是什么？它好像没用过。关于
addCommentFormListener
中的第二点，我不想
这个
引用它被激发的元素吗？或者你只是建议我把东西命名得更好？我比较新的arrow函数和Python中的lambda函数是否正确？它们看起来很相似，实际上并不比JavaScript中的普通匿名
function
s更相似。
函数
和
=>
之间的主要区别在于
=>
将保留
此
的值，因为它在函数之外，而
函数
则完全取决于调用函数的方式。你可以把
（）=>{…}
看作
（函数（）{…}）.bind（这个）
。我不确定我是否理解这里的一切。我明白为什么我最初写的东西是用
这个
来表示两种不同的东西。
索引、元素
只是为了避免这种情况，并将第一个
重命名为this
，还是有更多的内容？
索引
参数的意义是什么？它好像没用过。关于
addCommentFormListener
中的第二点，我不想
这个
引用它被激发的元素吗？或者你只是建议我把东西命名得更好？我比较新的arrow函数和Python中的lambda函数是否正确？它们看起来很相似，实际上并不比JavaScript中的普通匿名
function
s更相似。
函数
和
=>
之间的主要区别在于
=>
将保留
此
的值，因为它在函数之外，而
函数
则完全取决于调用函数的方式。你可以把
（）=>{…}
看作
（函数（）{…}）.bind（这个）
。