$function(){}页面加载函数全局和局部的问题和如何给a标签或者其他标签在ajax中异步绑定事件出现异步的问题

    <div class="container"><div class="left"></div><div class="right clearfix"></div></div>

$function(){}:页面加载函数（先等页面加载完成后再执行JS），如果在这里面再声明一个函数，那么在外部是调用不到它的。

    $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}}})//console.log($(".left div a").html());function getWares(typeId){//console.log("@@@")$.ajax({url:"searchByType?typeId="+typeId,type:"get",dataType:"json",success:function (data){}})}})

这样写完后（先在第一个div里面追加div再在div里面追加a标签，并给a标签绑定点击函数），但是这个时候页面会报出 getWares()这个函数未定义的错误! 原因是a标签里面的点击属于外部调用，而这个函数定义在$ function(){}里面，相当于这个函数已经属于是局部函数了，只在$ function(){}里面生效，所以会报出这个错误。

可以这样解决：

    $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}}})})//console.log($(".left div a").html());function getWares(typeId){//console.log("@@@")$.ajax({url:"searchByType?typeId="+typeId,type:"get",dataType:"json",success:function (data){}})}

把function放在$ function()函数外面，使其变成全局函数
如果不是内嵌的JS，也可以考虑包$ function()函数去掉，使其变成全局函数

    $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}}})$("a").click(function (){})})

还可以像上面这样，给具体的标签这样绑定点击事件，那这个时候，它就不算是外部调用了，并且这样写，它不属于是声明一个函数，而是直接内部绑定了函数，所以这样没事（但本题这样写不可以，因为涉及到了ajax异步问题）

AJAX异步问题初探

    $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}}})console.log($(".left div a").html());})

控制台报出 undefined，原因：ajax这里是异步请求，也就是说，当执行$.ajax{}这段时，下面的console.log( $(“.left div a”).html()) 这段其实也在执行，因为这是异步，没有顺序执行这种说法了，而假如，.ajax这段还没执行完，先打印这个时候就肯定会报undefined这给错误了。

    $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}console.log($(".left div a").html());}})})

放在第一个.ajax这个时候能正常输出

可以尝试换一种思路，我上面是想要获取到a标签，然后给a标签$（“.a”）.click(function(){})绑定鼠标点击事件，但是刚刚说了，要么放在第一个 $ .ajax({})里面，但这样总感觉不太好，或者干脆这样：
我不通过获取标签然后点击绑定事件，直接在a标签里面绑定函数

 $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}}})})function getWares(typeId){console.log(typeId)$.ajax({url:"searchByType?typeId="+typeId,type:"get",dataType:"json",success:function (data){}})}

这样写，压根就不需要获取什么标签了然后绑定了（因为获取标签就有可能会出现异步问题：获取标签的时候，标签都还没有加载完成，其实导致这样的问题根本原因就是异步，即它们是同时执行的，而不是顺序执行的）

    $(function (){var $left = $(".left");var $right = $(".right");$.ajax({url:"init",type:"get",dataType:"json",success:function (data){//console.log(data)for(var i=0;i<data.length;i++){$left.append("<div><a href='javascript:getWares("+data[i].typeId+")'>"+data[i].typeName+"</a></div>")// $left.append("<div id='"+data[i].typeId+"'>"+data[i].typeName+"</div>");}}})})function getWares(typeId){//清除之前的div$(".right div").html("");var $right = $(".right");console.log(typeId)$.ajax({url:"searchByType?typeId="+typeId,type:"get",dataType:"json",success:function (data){for(var i=0;i<data.length;i++){$right.append("<div> <img src='image/"+data[i].img+"'> <div>￥"+data[i].price+"</div><div>"+data[i].wareName+"</div></div>")}}})}

$ (“.right div”).html(“”)能正常执行到:
$(“a”).click(function(){})不可以是因为绑定的前提是先要找到a标签，而找到a标签这个动作 $(“a”)它这段是需要和ajax异步时同时执行的，所以实际上会出现找不到a标签的情况
而 function getWares(typeId){}只是一个函数，它是需要触发的，根本不会和ajax同时触发，它时通过a标签内部直接绑定的函数，当你触发这段函数的时候，标签百分百加载完毕了，所以 $ (“.right div”).html(“”)能正常执行到！！！

$function(){}页面加载函数全局和局部的问题和如何给a标签或者其他标签在ajax中异步绑定事件出现异步的问题

AJAX异步问题初探

最新文章

热门文章