js - 奇怪的回调探索

　做一个手机端页面是发现的奇怪的问题，函数调用的问题（回调）。

　　一句话描述： 某一个dom元素绑定的事件函数在全局能trigger方法调用，但是在ajax成功回调函数里不能被trigger方法调用。

　　具体例子：

　　图中的tab栏，4个选项，每个选项都绑定了click事件，点击的时候会变蓝，其他事白色。

　　页面最开始是第一个选项蓝色。

               <div class="tabModule">
                    <div class="tabItem active"><span>签到</span</div>
                    <div class="tabItem "><span>待办事项</span></div>
                    <div class="tabItem "><span>反馈信息</span></div>
                    <div class="tabItem"><span>签退</span></div>
                </div>

　　我给每个div.tabItem元素绑定click事件，函数handleClick

$('.tabItem').on('click', handleClick);
function handleClick() {
    $(this).addClass('active').siblings('.active').removeClass('active');
}

　　我在全局里面调用trigger 方法来触发第二个选项的click事件。

$('.tabItem:nth-child(2)').trigger('click')

　　结果显示正确

　　当我将这个表达式写进ajax成功回调时,这个表达式还是能成功执行了。

$.sendAjax(baseURL + url.signIn.signInSave,{actionId: '1-O7TGF' , jingdu: 121.385499, weidu: 31.269935, type: '签到'},function(){

    setTimeout(function(){
        $('.tabItem:nth-child(2)').trigger('click')
    },200)
})

　　这是我封装的ajax，最后的方法是成功回调。

　　但是，当我在页面中添加个按钮并且给这个按钮增加一个方法，此方法中含有这个ajax函数。 这时ajax成功了但是没有执行 trigger表达式。

　　

　　

　　　　代码如下：

　　

$('.punchBtnOut').on('click', function () {
    $.sendAjax(baseURL + url.signIn.signInSave, {actionId: '1-O7TGF', jingdu: 121.385499, weidu: 31.269935, type: '签到'},
        function () {
        setTimeout(function () {
            $('.tabItem:nth-child(2)').trigger('click')
        }, 200)
    })
});

　　加入一些测试来确定一下问题发生位置。

　　

$('.tabItem').on('click', handleClick);
function handleClick() {
    console.log('click被触发');
    $(this).addClass('active').siblings('.active').removeClass('active');
}
$('.punchBtnOut').on('click', function () {
    $.sendAjax(baseURL + url.signIn.signInSave, {actionId: '1-O7TGF', jingdu: 121.385499, weidu: 31.269935, type: '签到'},
        function () {
            console.log('成功回调被执行');
        setTimeout(function () {
            console.log('延时函数被执行');
            $('.tabItem:nth-child(2)').trigger('click')
        }, 200)
    })
});

结果是

　　　　可以看到click函数 handleClick 没有被触发。

　　　　通过比较可以看出这个问题的关键处在了这个按钮的点击事件上面。

　　　　我们将中间的ajax和延时去掉，当点击按钮的时候直接触发 trigger方法

　　　　

$('.punchBtnOut').on('click', function () {
    console.log('点击执行');
    $('.tabItem:nth-child(2)').trigger('click')
});

　　结果是 输出点击执行，tab栏没有发生变化。

　　真正的原因。我找到了一个一解决的办法。

　　

handleClick.bind($('.tabItem:nth-child(2)')[0])

用bind方法来产生个新函数，在点击的时候调用