為什么我的聽眾沒有依附？

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實例。 這目前可以正常使用，但是如果您在一個月后重新訪問此代碼，可能會造成混淆：)