Question

当用户点击我的html按钮时，onclick事件将被执行10次。我真的不明白为什么。我动态创建一个html按钮以添加到10个元素，因为

divs.length = 10

以下是我的功能代码：

function addButton(){
    var divs = document.querySelectorAll (".posted-on"); 
    for (i=0;i<divs.length;i++){
        //new title and news url 
        var newsTitle = divs[i].parentNode.previousElementSibling.textContent;
        var newsLink = divs[i].parentNode.previousElementSibling.innerHTML;
        //html button creation
        var button = document.createElement('button');
        var textenode = document.createTextNode('add me');
        button.appendChild(textenode);
        //ad listener on the button for an onclick event
        button.onclick = setNewCookie(newsTitle, newsLink, 'localhost', '/');
        //insert button after the element <span class="posted-on"></span>
        divs[i].parentNode.insertBefore(button, divs[i].nextSibling);        
    }
}

我看到onclick函数被调用了10次，因为当我点击一次时，我在浏览器中看到了10个cookie。每个cookie代表10个不同的新闻项目（我的WordPress主页的10个新闻标题）

以下是函数setNewCookie的代码：

    function setNewCookie(cookieName, cookieValue, domainValue, pathValue){
    var cook = (cookieName); 
    var val = (cookieValue);
    var myDate = new Date();
    myDate.setMonth(myDate.getMonth() + 12);
    document.cookie = cook +"=" + val + ";expires=" + myDate + "; domain="+domainValue+"; path="+pathValue+"; ";
}

Answer 1

您的代码存在两个问题。

问题 - 您调用了“setNewCookie”＆＃39;将值设置为＆＃39; onclick＆＃39;属性，设置的设置＆＃39; setNewCookie＆＃39;作为财产。

解决方案 - 我们用匿名函数包装函数。

问题 - 您在＆＃39;中使用相同的变量循环时，onClick回调中变量的值将是回调调用时为它们设置的最后一个值。

解决方案 - 我们调用匿名函数来获取我们使用＆＃39; for＆＃39;获取的变量。循环，因此该范围内的值将保持不变＆＃39;并返回用另一个匿名函数包装的函数取代

button.onclick = setNewCookie(newsTitle, newsLink, 'localhost', '/');

与

button.onclick = (function(newsTitle, newsLink){
   return function(){
        setNewCookie(newsTitle, newsLink, 'localhost', '/');
  };
})(newsTitle, newsLink);

Javascript onclick事件循环执行超过1次

1 个答案: