Javascript:闭包?eventlistener获胜't添加

Javascript: closures? eventlistener won't add

本文关键字：添加 获胜 闭包 eventlistener Javascript      更新时间：2023-09-26

我似乎有问题，我怀疑这是闭包的问题。我有3个按钮，当我运行这段代码时，只有最后一个按钮会得到一个eventlistener。这就是为什么我怀疑存在闭包问题。我尝试了创建其他函数的各种方法，但都无济于事。在函数addListeners中，我有3个console.log，其中包含信息，它们显示正确的信息。因此，在addeventlisteners中，我有正确的DIV，有正确的信息，但它没有添加listener。有人能帮我吗？我不知道自己做错了什么。

function CheckAiringShows(slug,lastwatched,Length) {
var nmb = lastwatched.number;
var nxnmb = nmb +1;
$.ajax({
    type: "GET",
    url: "https://api-v2launch.trakt.tv/calendars/all/shows/"+strDate+"/30",
    headers: {
        "Content-Type": "application/json",
        "trakt-api-version": "2",
        "trakt-api-key": "a16246673f04042fca0fbc80eddd2b8b742524f62deaf11a6d0daf97f053005f"
    },
    success : function(response)
    {
        response.forEach(function (object, index) {
            if(slug == object.show.ids.slug){
                var airdate = new Date(object.first_aired).format("dddd, mmmm dS 'at' HH:MM:ss");
                var nextnumber = "s"+object.episode.season+"e"+object.episode.number;
                document.getElementsByClassName("airingshow")[0].innerHTML += "<label for='test'>"+object.show.title+": "+nextnumber+" "+airdate+"</label><input type='submit' class='calendar' id='"+object.episode.ids.trakt+"' value='Add to calendar!'/>";
                var calend = document.getElementById(object.episode.ids.trakt);
                addListeners(calend,object,Length);
            }
        });
    }
});
}
function addListeners(item,object,length){
    console.log(item);
    console.log(object);
    console.log(length);
          // this line didn't work out at all, nothing got an eventlistener this way.
          // return function(){item.addEventListener('click', function(){makeApiCall(object,length)})};
    item.addEventListener('click', function(){makeApiCall(object,length)});
}

这是因为您在每次迭代中都要替换innerHTML，从而有效地销毁先前创建的DOM元素并替换它们。

以下是一些解决方案：

  • 首先生成整个HTML，然后更改innerHTML和附加处理程序
  • 在容器上附加一个处理程序，并在所需的子级上处理冒泡事件（事件委派）
  • 使用DOM API（例如document.createElement(...)、container.appendChild(...)）构建DOM

如果容器的内容是动态的，则事件委派通常更简单，因为您不必担心在新添加的元素上添加处理程序。

$('#dynamic-container')
  .on('click', 'button', function () {
    alert('You clicked on a button!'); 
  })
  //cliking dynamically added button will also work
  .append('<button>dynamic button</button>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamic-container">
  <button>static button</button>
</div>

相关文章：