在我将它们移动到其他位置后，链接无法在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事件。