本片文章相关话题：JavaScript函数not a function问题
核心知识: this指向问题
上述话题基础请自行补脑
document.getElementById('timeTips').addEventListener('click',function (){
var mobileCodeBtn= document.getElementById('timeTips');
var mobile = $("#mobile").val();
if(mobile == ''){
return WST.msg('手机号不能为空');
}
var phon = /^1[3|4|5|7|8]\d{9}$/;
$.post(WST.U('home/users/check'),{mobile:mobile},function(data,textStatus){
if (data.status == -1) {
return WST.msg('请使用绑定的手机');
}else if(data.status == 1){
// alert(data.status);exit();
if ( mobile && mobile != null && phon.test(mobile)){
ruleCode(this,mobile,mobile+"-"+num);
remoeDis(this);
}
}
});
});
- 这些代码放到浏览器执行后，肯定要报错了，错误代码如下
editPass.html:690 Uncaught TypeError: btn.setAttribute is not a function
at removeDis (editPass.html:690)
at Object.success (editPass.html:744)
at j (jquery.min.js?v=1.4.1_170330_:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=1.4.1_170330_:2)
at x (jquery.min.js?v=1.4.1_170330_:5)
at XMLHttpRequest.b (jquery.min.js?v=1.4.1_170330_:5)
btn.setAttribute is not a function
at removeDis (editPass.html:690)
主要看这行错误，xxx is not a function就是正主了
错误原因：
-
出在这里ruleCode(this,mobile,mobile+"-"+num)函数和remove(this)中的this上
-
主要还得从这行代码入手
$.post(WST.U('home/users/check'),{mobile:mobile},function(data,textStatus)
接下来找到jQuery的$.post()事件源码：
Query.each( [ "get", "post" ], function( i, method ) {
jQuery[ method ] = function( url, data, callback, type ) {
// Shift arguments if data argument was omitted
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = undefined;
}
// The url can be an options object (which then must have .url)
return jQuery.ajax( jQuery.extend( {
url: url,
type: method,
dataType: type,
data: data,
success: callback
}, jQuery.isPlainObject( url ) && url ) );
};
} );
可以发现它返回了一个ajax对象，这就造成了this指向错误了，
解决方法是在$.post()事件之前将this指针用一个变量存放起来。改动后的代码具体如下：
document.getElementById('timeTips').addEventListener('click',function (){
var mobileCodeBtn= document.getElementById('timeTips');
var mobile = $("#mobile").val();
var that = this;
if(mobile == ''){
return WST.msg('手机号不能为空');
}
var phon = /^1[3|4|5|7|8]\d{9}$/;
$.post(WST.U('home/users/check'),{mobile:mobile},function(data,textStatus){
if (data.status == -1) {
return WST.msg('请使用绑定的手机');
}else if(data.status == 1){
// alert(data.status);exit();
if ( mobile && mobile != null && phon.test(mobile)){
ruleCode(that,mobile,mobile+"-"+num);
remoeDis(that);
}
}
});
});
-
补充一点：this是根据上下文查找当前对象(个人编程理解)
以上分享如有错误，还请各位大佬<strong>匡正、指正、斧正</strong>
