我的“点击”addEventListener不能正常工作

我使用下面的代码来添加侦听器到（我追加到表中的TBODY），所以我可以看到很好的高光效果，当我把鼠标放在TR。我也有一个“点击”事件，这使得整行“可点击”，因此用户可以轻松点击整行并转到该特定页面。我的“点击”addEventListener不能正常工作

我使用JS，因为我使用AJAX调用来填充TR（及其少数TD）。

我的列表中的前12个元素用PHP完成，但之后我通过Ajax调用下一个10,10,10 ...。

当我使用PHP和JavaScript添加：与“点击”的TR它完美，但在下面这段代码（JavaScript的），只有鼠标悬停和鼠标移开做工精细， “点击”事件侦听器添加到所有的window.location.href都是i的最后一个值，当前值（13,14,15）被删除了......它只增加了15个（所以总是最后一个值 - 我的计数器......它不会增加作为柜台）。

我认为关于事件监听器的功能如何，它是如何初始化的，我不知道的。

   for(i=0; i<10; i++){ 

        myTr.addEventListener("mouseover",function(){ 
         this.style.backgroundColor = "#083636" 
         this.style.cursor = "pointer" 
        }); 

        myTr.addEventListener("mouseout",function(){ 
         this.style.backgroundColor = "transparent" 
        }); 

        myTr.addEventListener("click",function(){ 
         window.location.href = '/clubbers/' + clubber_url + '/' + i + '#threads' 
        }); 

      }

*忘了，开始我对支架打字时/复制代码，现在它看起来不错

来源

2013-08-03 Adrian Tanase

能否请你检查你的代码，你没有关闭托架... – Pierre

你重复循环十次，它会相应地设置window.location.href值，因此最终只发送最后一个值。 – Whistletoe

你也不需要鼠标悬停和鼠标改变颜色，你可以添加tr：hover {background-color：＃083636;光标：指针}您的css – Desu

这是一个范围的问题。基本上，你将i传递给你的eventListener，它是循环递增的相同变量。见How do JavaScript closures work?一个更好的解释

你可以这样做：

myTr.addEventListener("click",(function(j){ 
    return function(e) { 
    window.location.href = '/clubbers/' + clubber_url + '/' + j + '#threads' 
    } 
})(i));

来源

2013-08-03 18:05:26 axelcdv

您的函数使我的代码立即跳转到第一篇文章我加载AJAX，这意味着我加载第一个12行PHP，通常，然后当我开始使用JavaScript函数，AJAX触发代码的地方我把我的事件侦听器，只要我触发AJAX代码，它“加载”第一行上的“点击”...自动以某种方式 –

哎呀你是对的，我的代码是不正确的，它应该是现在 – axelcdv

作品像一个魅力！感谢在星期六晚上我们在那里:)） –

你的问题是，从外for循环变量i不是由时的正确捕获，因为在评估事件时，循环已经完成，并且变量处于最后一个值。

看看这个帖子的一些解决方案：

Caputured variables in Javascript

来源

2013-08-03 18:04:32 zewa666

function clickTr(i){ 
    return function(){ 
     window.location.href = '/clubbers/' + clubber_url + '/' + i + '#threads'; 
    } 
} 
for(i=0; i<10; i++){ 

       myTr.addEventListener("mouseover",function(){ 
        this.style.backgroundColor = "#083636" 
        this.style.cursor = "pointer" 
       }); 

       myTr.addEventListener("mouseout",function(){ 
        this.style.backgroundColor = "transparent" 
       }); 

       myTr.addEventListener("click",clickTr(i)); 

     }

来源

2013-08-03 18:15:30 Pierre

我认为你的解决方案工作太配偶，只是从上面的答案中得到它，但你的答案似乎更像我的代码:)轻松阅读，简单:)谢谢！ –

我的“点击”addEventListener不能正常工作

回答

相关问题