链接在我将它们移动到不同的位置后不能在chrome-extension中工作

Question

我的google-chrome-extension在页面加载后将某些div移到不同的位置：

var div = $('div.joinContributors').first();
if (div != null) {
    div.insertAfter($('div.filmRateBox').first());
}

并且存储在该div中的链接不再起作用。当我使用Chrome开发工具检查html代码时，我可以看到：

<li><a class="link" href="link_to_another_subpage" rel="nofollow">name_of_the_link</a></li>

但是当我创建新的链接并将其添加到那里时，一切都很正常：

$("<a>", {"href": "link_to_another_subpage", "text": "name_of_the_link"}).insertAfter($('div.filmRateBox').first());

你知道他们为什么不工作吗？

Answer 1

由于内容有正常的链接和正确的URL，默认情况下必须正确处理，最可能的原因是站点使用了带有父节点检查的自定义单击事件处理程序。

一个简单的解决方案是作为HTML插入以重新创建精确的布局，但去掉所有事件处理程序：

var $div = $('div.joinContributors').first();
if ($div.length) {
    $('div.filmRateBox').first().after($div.prop('outerHTML'));
    $div.remove();
}

请注意，document.querySelector比$('...').first()快得多，因为它不会构建整个集合。

另一个很不可靠的解决方案是删除事件处理程序，但它只适用于可通过jQuery._data(element, 'events')或.onxxxxx DOM属性访问的jQuery事件。