单击不起作用的链接上的处理程序

Click handlers on links not working

本文关键字：处理 程序 链接 不起作用 单击      更新时间：2023-09-26

我有一个chrome扩展，我有

popup。html我调用jquery。js, popup。js和link。js

    ...
    <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，链接工作后;

我做错了什么?

您的代码在 link.js之前加载popup.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事件绑定到所有现有锚(无)。此后，您将添加新的链接。这个序列显然是行不通的。

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

$(document).on('click', 'a', function() {
    chrome.tabs.create({url: this.href});
});
相关文章：