使用javascript在新标签页中打开链接会停止工作

I have some code on my tumblr blog that makes it so the links in the "notes" div open in a new tab — it works fine but once i click "Show More Notes" (which loads more links), it stops working on those links. Here is my code.

我的tumblr博客上有一些代码使得“notes”div中的链接在新标签中打开 - 它工作正常但是一旦我点击“显示更多笔记”(加载更多链接),它就会停止工作链接。这是我的代码。

<script type="text/javascript">
$(function(){
  $("#notes a").attr("target","_blank");
});
</script>

Here is what tumblr says on this issue: "Notes are paginated with AJAX. If your theme needs to manipulate the Notes markup or DOM nodes, you can add a Javascript callback that fires when a new page of Notes is loaded or inserted"

以下是tumblr在这个问题上所说的:“Notes是用AJAX分页的。如果你的主题需要操作Notes标记或DOM节点,你可以添加一个Javascript回调,当加载或插入新的Notes页面时会触发它”

tumblrNotesLoaded(notes_html) "If this Javascript function is defined, it will be triggered when a new page of Notes is loaded and ready to be inserted. If this function returns false, it will block the Notes from being inserted."

tumblrNotesLoaded(notes_html)“如果定义了这个Javascript函数,它将在加载Notes的新页面并准备插入时触发。如果此函数返回false,它将阻止插入Notes。”

tumblrNotesInserted() "If this Javascript function is defined, it will be triggered after a new page of Notes has been inserted into the DOM."

tumblrNotesInserted()“如果定义了这个Javascript函数,它将在将一个新的Notes页面插入DOM后触发。”

3 个解决方案

#1

the newly loaded links wont have target set to _blank ... what you should do, when you've loaded the new links is execute

新加载的链接不会将目标设置为_blank ...当你加载新链接时你应该做什么就是执行

$("#notes a").attr("target","_blank");

again - as you've shown no code regarding the loading of these links, that's the best I can do

再次 - 因为你没有显示关于加载这些链接的代码,这是我能做的最好的

edit: I just looked at your page - I think this should do the trick

编辑:我只看了你的页面 - 我认为这应该可以解决问题

this.style.display = 'none';
document.getElementById('notes_loading_121152690941').style.display = 'block';
if (window.ActiveXObject) var tumblrReq = new ActiveXObject('Microsoft.XMLHTTP');
else if (window.XMLHttpRequest) var tumblrReq = new XMLHttpRequest();
else return false;
tumblrReq.onreadystatechange = function() {
    if (tumblrReq.readyState == 4) {
        var notes_html = tumblrReq.responseText.split('<!-- START ' + 'NOTES -->')[1].split('<!-- END ' + 'NOTES -->')[0];
        if (window.tumblrNotesLoaded)
            if (tumblrNotesLoaded(notes_html) == false) return;
        var more_notes_link = document.getElementById('more_notes_121152690941');
        var notes = more_notes_link.parentNode;
        notes.removeChild(more_notes_link);
        notes.innerHTML += notes_html;
        if (window.tumblrNotesInserted) tumblrNotesInserted(notes_html);
        // ************************************************
        $("#notes a").attr("target","_blank");
        // ************************************************
    }
};
tumblrReq.open('GET', '/notes/121152690941/lhtXynZtK?from_c=1433902641', true);
tumblrReq.send();
return false;

the added line is surrounded by // ************************************************

添加的行包围// ****************************************** ******

#2

You could set target attribute on mousedown delegated event, e.g:

您可以在mousedown委托事件上设置目标属性,例如:

$(function () {
    $('#notes').on('mousedown', 'a:not([target])', function () {
        this.target = "_blank";
    });
});

#3

Use this:

$('ol.notes').on('click', 'a', function (e) {
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) {
        return;
    }
    window.open(this.href);
    e.preventDefault();
});

This attaches an event handler on the notes container, making sure that it only gets clicks on a elements and that the clicks are not middle-clicks, alt-clicks, …

这会在notes容器上附加一个事件处理程序,确保它只获得元素的点击,并且点击不是中间点击,alt-clicks,......

Once all of those superfluous clicks are filtered out, it simply opens a new tab via Javascript; there's no need to set target="_blank"

一旦所有这些多余的点击被过滤掉,它只需通过Javascript打开一个新的标签;没有必要设置target =“_ blank”

#1