Question

我将XMLHttprequest()的结果解析为JSON对象，然后对于该对象的每个节点，我创建一个div来存储信息。最后，我将每个div添加为父div的innerHTML。

这里是相关部分

xhr.onreadystatechange = function() {//Call a function when the state changes.
    if(xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        var html="";
        var linksDiv = document.getElementById('links');
        if (response.error != true){
          for (var i=0; i< response.links.length; i++){
            var l = response.links[i];
            var curId = l.id;
            var curLink = l.link;
            var curCreated = l.created_at;
            var curOrigin = l.origin;

            html =  "<div id=\"link"+curId+"\" >"+
                    "<label><b>Id </b></label><label>"+curId+"</label> </br>"+
                    "<label><b>Link </b></label><label>"+curLink+"</label> </br>"+
                    "<label><b>Created </b></label><label>"+curCreated+"</label> </br>"+
                    "<label><b>Origin </b></label><label>"+curOrigin+"</label> </br></br>"+
                    "</div>";
            linksDiv.innerHTML += html;

            var curDiv = document.getElementById('link'+curId);
            console.log("curDiv is"+'link'+curId);
            curDiv.addEventListener('click', function(){
             curDiv.style.background="gray";
             getLink(curId);
            });        
          }
        }
    }
  }

不幸的是

curDiv.addEventListener('click', function(){
             curDiv.style.background="gray";
             getLink(curId);
            });

不起作用。

我已经尝试确保div存在（console.log("curDiv is"+'link'+curId);工作得很好）甚至使用了不同的方式，如curdDiv.onmouseover = function(){curDiv.style.background="gray";}

如果我将curDiv.style.background="gray";放在addEventListener()之外，每个div的背景都会被正确更改。

如果我在生成它时将onmouseover="this.style.background='gray';"作为div标签的内联属性，它也能正常工作，但我不想在html中使用javascript，因为我会在Chrome扩展程序中转换此页面和javascript必须分开

请不要对mouseover尝试感到困惑，我需要onclick行为，但只是测试不同的东西，看它们是否有效。

我在SO上找了很长时间寻找答案，正如你从我的尝试中看到的那样，但是找不到对我有用的东西。可能有些东西是我无法获得的。

聚苯乙烯。如果您需要一个示例JSON数据来测试该函数，请告诉我。

Answer 1

我认为你应该使用

＆＃13;

html = document.createElement('div');
html.id = 'link' + curId;

html.innerHTML = "<label><b>Id </b></label><label>" + curId 
+ "</label> </br><label><b>Link </b></label><label>" + curLink
+ "</label> </br><label><b>Created </b></label><label>" + curCreated
+ "</label> </br><label><b>Origin </b></label><label>" + curOrigin
+ "</label> </br></br>";

html.addEventListener('click', function(){
     this.style.background="gray";
     getLink(this.id);
}); 

linksDiv.appendChild(html);

＆＃13;

而不是

＆＃13;

html =  "<div id=\"link"+curId+"\" >"+
                    "<label><b>Id </b></label><label>"+curId+"</label> </br>"+
                    "<label><b>Link </b></label><label>"+curLink+"</label> </br>"+
                    "<label><b>Created </b></label><label>"+curCreated+"</label> </br>"+
                    "<label><b>Origin </b></label><label>"+curOrigin+"</label> </br></br>"+
                    "</div>";
linksDiv.innerHTML += html;
var curDiv = document.getElementById('link'+curId);
console.log("curDiv is"+'link'+curId);
curDiv.addEventListener('click', function(){
    curDiv.style.background="gray";
    getLink(curId);
});

＆＃13;

Answer 2

检查此工作代码。延迟，以便事件将附加到元素。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function populateLink() {
                var html = "";
                var linksDiv = document.getElementById('links');
                for (var i = 0; i < 10; i++) {
                    var l = 'l-' + i;
                    var curId = i;
                    var curLink = 'l.link-' + i;
                    var curCreated = 'l.created_at_' + 1;
                    var curOrigin = 'l.origin_' + i;

                    html = "<div id=\"link" + curId + "\" >" +
                            "<label><b>Id </b></label><label>" + curId + "</label> </br>" +
                            "<label><b>Link </b></label><label>" + curLink + "</label> </br>" +
                            "<label><b>Created </b></label><label>" + curCreated + "</label> </br>" +
                            "<label><b>Origin </b></label><label>" + curOrigin + "</label> </br></br>" +
                            "</div>";
                    linksDiv.innerHTML += html;

                    //var curDiv = document.getElementById('link' + curId)
                    //curDiv.addEventListener('click', function () {
                    //    this.style.background = "gray";
                    //    getLink(this.id);
                    //});

                   attachEvent(curId);
                }
            }

            function attachEvent(curId) {
                setTimeout(function () {
                    var curDiv = document.getElementById('link' + curId)
                    curDiv.addEventListener('click', function () {
                        this.style.background = "gray";
                        //getLink(this.id);
                    });
                }, 100);
            }
            window.onload = populateLink;
        </script>

    </head>
    <body>
        <div id="links"></div>
    </body>
    </html>

无法添加事件管理器（＆＃39;点击＆＃39;，...）到以编程方式创建的div

2 个答案: