0

我有一个 chrome 扩展，其中有

我调用 jquery.js、popup.js 和 link.js 的 popup.html

    ...
    <script src="jquery.js"></script>
    <script src="popup.js"></script>
    <script src="link.js"></script>
  </head>

popup.js

var streamGenerator = {

  /* Twitch URL to the top 20 streams */
  searchOnTwitch_: 'https://api.twitch.tv/kraken/streams?limit=20',

  /* XHR Request to grab those streams */
  requestStreams: function() {
    var req = new XMLHttpRequest();
    req.open("GET", this.searchOnTwitch_, true);
    req.onload = this.showStreams_;
    req.send(null);
  },

  /* onload event inserting the streams into the DOM */
  showStreams_: function(e) {
    var streams = JSON.parse(e.target.responseText).streams;

    for (var i=0; i < streams.length; i++) {
      var stream = {
        game: streams[i].game,
        name: streams[i].channel.name,
        viewers: streams[i].viewers,
        link: streams[i].channel.url,
      };

      $('tbody').append('<tr>'
        + '<td>' + stream.game + '</td>'
        + '<td>' + '<a href=' + stream.link + '>' + stream.name + '</a></td>'
        + '<td>' + stream.viewers + '</td></a>'
      );
    }
  }
};

document.addEventListener('DOMContentLoaded', function() {
  streamGenerator.requestStreams();
});

然后是 link.js

$(function() {
  $('a').click(function(){
    chrome.tabs.create({url: $(this).attr('href')});
  });
})

弹出窗口有效并显示它应该显示的内容，但链接不会打开新选项卡。

如果我去 chrome 的控制台，我不会收到任何错误，但如果我复制/粘贴 link.js jquery，链接会在之后工作；

我究竟做错了什么？！

4

1 回答 1

1

您的代码popup.js 在 link.js. 相关部分按以下顺序执行：

// popup.js
$(function() {
    $('a').click( ... );
})
// link.js
document.addEventListener('DOMContentLoaded', function() {
    streamGenerator.requestStreams(); //<-- Creates the links
});

$(func)大致等于document.addEventListener('DOMContentLoaded', func)，所以你正在做的实际上是这样的：

// Run after the DOMContentLoaded "domready" event:
$('a').click(...);
streamGenerator.requestStreams(); // Creates the links

首先，您将click事件绑定到所有现有的锚点（无）。此后，您将添加新链接。这个顺序显然行不通。

它可以通过交换 and 的顺序来解决popup.js，link.js或者通过使用事件委托来解决：

$(document).on('click', 'a', function() {
    chrome.tabs.create({url: this.href});
});
于 2013-03-17T09:55:46.940 回答