JavaScript:闭包？事件监听器不会添加

Question

我似乎遇到了问题，我怀疑这是闭包的问题。我有 3 个按钮，当我运行此代码时，只有最后一个按钮获得事件监听器。这就是为什么我怀疑闭包问题。我尝试了各种创建其他功能的方法，但对我没有帮助。在函数 addListeners 中，我有 3 个包含信息的 console.log，它们显示正确的信息。因此，在 addeventlisteners 中，我有正确的 DIV，具有正确的信息，但它没有添加监听器。有人可以帮我吗？我不知道我做错了什么。

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)});
}

Answer 1

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

这里有一些解决方案:

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

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

$('#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>