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

Question

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.

<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"

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."

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

Answer 1

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

$("#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 // ************************************************

Answer 2

You could set target attribute on mousedown delegated event, eg:

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

Answer 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, …

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"