ajax点击事件第一次无效，第二次有效，但是其他事件又出现问题。
0
悬赏园豆：50
[已解决问题]
解决于 2016-09-24 03:00
我在练习做一个网页的时候，做了一个滚动条。内有若干小图片在内滚动，点击滚动条里的图片，触发以下两个事件：
（1）在一个大div（bigcover）的img标记中显示滚动条点击的小图片
（2）在另外一个<div id="intro">中通过ajax请求相应的txt文档内容。
这时出现问题：
（1）首次点击滚动条内的小图，图片可以切换，但是<div id="intro">里的内容没有切换。
（2）再点击该小图，<div id="intro">里的内容切换成功。
（3）滚动条内，bigcover内的图片默认为a，首次点击图片b，切换成功。再首次点击图片c，图片切换成功，这时再次点击图片b，图片不切换。无论多少次都一样。
简单的说就是：文本内容框第一次点击没反应，第二次才正常，图片框却只有第一次点击才有反应。后面再点击就不切换了。
问题分析：
（1）图片滚动：原本是13张，我设置为26张，然后跳帧处理——不过这应该没关系
（2）我删除了调用ajax函数部分的语句后，图片切换正常
（3）经检测，第二次点击小图片时，ajax生效，但是并没有发生onclick事件。所以图片还是原来的。
代码如下
function ajax(obj,url, fnSucc, fnFaild){ obj.onclick=function(){ var oAjax=null; if(window.XMLHttpRequest){ oAjax=new XMLHttpRequest(); }else{ oAjax=new ActiveXObject("Microsoft.XMLHTTP"); }; oAjax.open('GET',url,true); oAjax.send(); oAjax.onreadystatechange=function(){ if(oAjax.readyState==4){ if(oAjax.status==200){ fnSucc(oAjax.responseText); }else{ if(fnFaild){ fnFaild(); } } } } } } //以上是ajax函数 function clickImg(){ var oScrollUl=document.getElementById('scroll_ul'); var aScrollImg=oScrollUl.getElementsByTagName('img'); var oBigcover=document.getElementById('big_cover'); var oCoverImg=oBigcover.getElementsByTagName('img')[0]; var oIntro=document.getElementById('intro'); for(i=0;i<aScrollImg.length;i++){ aScrollImg[i].index=i+1; aScrollImg[i].onclick=function(){ if(this.index>aScrollImg.length/2){ this.index=this.index-aScrollImg.length/2; } oCoverImg.src=this.src; ajax(this,'service/'+this.index+'.txt?t='+new Date().getTime(),function(str){ oIntro.innerHTML=str; }); } } } //以上是点击事件函数
最佳答案
1
把ajax函数里的obj点击事件去掉，就显示正常了。原因是点击之后，又触发了一次点击前提。当时学习的时候，自作主张给ajax函数加了个obj参数和点击事件。以至于反复地在ajax函数语境内循环。
问题发现契机：注意到clickImg函数内的click事件总是在第一次之后不执行，终于留意ajax函数有问题，看了很多云里雾里的资料都说不到点，现在终于明白了。得来全不费工夫..