Javascript Coffeescript ajax成功调用外部函数

我有一个正在显示的待处理邀请列表。当用户接受一个邀请时，我希望隐藏该邀请并显示下一个邀请（如果可用）

使用此Coffeescript代码，showNextInvitation（）抛出“未捕获类型错误：未定义不是函数”：

使用此代码，功能可以正常工作，但目标邀请不会褪色：

_this = this
$('#invitations').on 'click', '.accept-invite-btn', () ->
   $(this).parents('form').ajaxSubmit(
       success: ->
           $(this).parents('.invitation').fadeOut()  
           _this.showNextInvitation() 
   )
   return false

---

这显然是一个函数绑定问题

在存储

\u此

的同时，您需要保留胖箭头以获得

成功：

_this = this
$('#invitations').on 'click', '.accept-invite-btn', () ->
    $(this).parents('form').ajaxSubmit(
        success: =>
            $(this).parents('.invitation').fadeOut()
            _this.showNextInvitation()
    )
    return false

对于代码段中包含的2个函数，其中涉及3个不同的

值：

# 1) `this` is an object with a `showNextInvitation` method

$('#invitations').on 'click', '.accept-invite-btn', () ->
    # 2) `this` is the `.accept-invite-btn` element that captured the event

    $(this).parents('form').ajaxSubmit(
        success: ->
            # 3) `this` is the object managing the Ajax request, likely a jqXHR

    )

虽然通过定义this

保存了#1，但它允许调用其方法

_this = this

# ...

    _this.showNextInvitation()

第二个代码片段期望#3与#2相同，胖箭头也可以

---

或者，您也可以将#2保存到它自己的变量中，可能是作为

$element

，并在整个过程中使用细箭头：

_this = this
$('#invitations').on 'click', '.accept-invite-btn', () ->
    $element = $(this)

    $element.parents('form').ajaxSubmit(
        success: ->
            $element.parents('.invitation').fadeOut()
            _this.showNextInvitation()
    )
    return false

---

非常感谢你！这正是我希望得到的深入答案——我现在理解“为什么”，并且将来能够更好地编写代码。奇怪的是，您提出的第一个解决方案不起作用-我认为应该，我肯定在其他地方有一个bug。第二个很好用，所以为了时间的利益，我用它。再次感谢。

_this = this
$('#invitations').on 'click', '.accept-invite-btn', () ->
    $element = $(this)

    $element.parents('form').ajaxSubmit(
        success: ->
            $element.parents('.invitation').fadeOut()
            _this.showNextInvitation()
    )
    return false