Question

我似乎有问题，我怀疑这是关闭的问题。我有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)});
}

Answer 1

这是因为你在每次迭代中都会替换innerHTML，有效地破坏以前创建的DOM元素并替换它们。

以下是一些解决方案：

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

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

＆＃13;

$('#dynamic-container')
  .on('click', 'button', function () {
    alert('You clicked on a button!'); 
  })
  //cliking dynamically added button will also work
  .append('<button>dynamic button</button>');

＆＃13;

<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>

＆＃13;

Javascript：关闭？ eventlistener不会添加

1 个答案: