Question

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

使用此Coffeescript代码，showNextInvitation（）会抛出“未捕获的TypeError：undefined不是函数”：

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

使用此代码，该功能正常，但目标邀请不会消失：

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

这显然是一个功能绑定问题。

Answer 1

您希望保留success:的胖箭以及存储_this。

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

如果您的代码段中包含2个功能，则涉及3个不同的this值：

# 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

Coffeescript ajax成功调用外部函数

1 个答案: