Javascript：关闭？ eventlistener不会添加
我似乎有一个问题，我怀疑这是关闭的问题。 我得到了3个按钮，当我运行这个代码时，只有最后一个按钮获得了一个eventlistener。 这就是为什么我怀疑封闭问题。 我尝试了各种各样的创造其他功能的东西，但没有帮助我。 在函数addListeners中，我有3个console.logs和信息，它们显示RIGHT信息。 所以在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)});
}
这是因为您在每次迭代中都会替换innerHTML ，从而有效地销毁先前创建的DOM元素并将其替换。
这里有几个解决方案：
innerHTML并附加处理程序。 document.createElement(...) ， container.appendChild(...) ）。 如果容器的内容是动态的，事件委托通常更简单，因为您不必担心在新添加的元素上添加处理程序。
$('#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>