Question

我正在尝试动态创建元素并向它们添加事件侦听器。这是一些代码：

var marks = {
  list:[{
    selected: "content",
    url: "http://youtube.com/feed/subscriptions",
    trait: "id"
  },{
    selected: "js-streams streams items",
    url: "http://twitch.tv/directory/following",
    trait: "class"
  }]
};

var l = marks.list.length;

var web = "<webview src='https://youtube.com/feed/subscriptions' preload='preload.js' disablewebsecurity></webview>";    

for(var i = 0; i < l; i++){
  var webadd = "<webview id=web" + i + " src=" + marks.list[i].url + " preload='preload.js' disablewebsecurity></webview>";
  $('#canvas1').append(webadd);

  document.getElementById("web" + (i)).addEventListener("dom-ready", function() {
        console.log("nice" + (i)); // <-- This line most likely needs changing
  });
}

现在，我可以在每个元素上获取我的元素和事件监听器，但是当涉及到控制台日志时，它会打印出"nice2"两次。有没有办法让该行将var i的值作为整数而不是i本身？理想情况下，我希望它打印出nice0和nice1。有任何想法吗？感谢。

Answer 1

您需要一个额外的函数来创建事件监听器并将当前i绑定到它：

document.getElementById("web" + (i)).addEventListener("dom-ready", (function(n) { 
    return function() {
        console.log("nice" + (n));
    }
})(i));

Answer 2

您最好使用forEach循环。这样你就可以拥有一个闭包并保持你的上下文。也读得更好。

 mark.list.forEach(function(item, i){
   var webadd = "<webview id=web" + i + " src=" + item.url + " preload='preload.js' disablewebsecurity></webview>";
   $('#canvas1').append(webadd);

  document.getElementById("web" + i).addEventListener("dom-ready", function() {
        console.log("nice" + i); // <-- 
  });
})

获取动态加载的整数变量值

2 个答案: