Uncaught TypeError: Kann Eigenschaft 'createDocumentFragment' von undefined nicht lesen

Question

Ich versuche, eine Webseite zu greifen und in ein Bootstrap 2.3.2 Popover zu laden. Bisher habe ich:

$.ajax({ 
    type: "POST", 
    url: "AjaxUpdate/getHtml", 
    data: { 
    u: 'http://stackoverflow.com' 
    }, 
    dataType: 'html', 
    error: function(jqXHR, textStatus, errorThrown) { 
    console.log('error'); 
    console.log(jqXHR, textStatus, errorThrown); 
    } 
}).done(function(html) { 
    console.log(' here is the html ' + html); 

    $link = $('<a href="myreference.html" data-html="true" data-bind="popover"' 
      + ' data-content="' + html + '">'); 
    console.log('$link', $link); 
    $(this).html($link); 

    // Trigger the popover to open 
    $link = $(this).find('a'); 
    $link.popover("show"); 

Wenn ich diesen Code aktivieren erhalte ich die Fehlermeldung:

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Was ist das Problem hier, und wie kann ich es beheben?

jsfiddle

Answer 1

Der Grund für den Fehler ist die $(this).html($link); in Ihrem .done() Rückruf.

this im Rückruf bezieht sich auf die [...]object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax)[...] und nicht auf die $(".btn.btn-navbar") (Oder was immer Sie erwarten, wo es sich beziehen sollte).

Der Fehler wird ausgelöst, weil jQuery intern .createDocumentFragment() auf dem ownerDocument von Objekt aufrufen werden Sie mit this geben, wenn Sie $(this).html($link); ausführen, aber in Ihrem Code die this ist kein DOMElement und keinen ownerDocument. Aus diesem Grund ist ownerDocumentundefined und das ist der Grund, warum createDocumentFragment auf undefined aufgerufen wird.

Sie müssen entweder die Option context für Ihre ajax Anfrage verwenden. Oder Sie müssen eine Referenz auf das DOMEelement speichern, das Sie in einer Variablen ändern möchten, auf die Sie im Rückruf zugreifen können.

Answer 2

Dieser Fehler auftreten, weil this auf der Ajax-Objekt und nicht auf dem DOM-Element Bezug genommen wird, zu lösen diese Sie etwas tun können:

$('form').on('submit', function(){ 
    var thisForm = this; 

    $.ajax({ 
     url: 'www.example.com', 
     data: {} 
    }).done(function(result){ 
     var _html = '<p class="message">' + result + '</p>'; 
     $(thisForm).find('#resultDiv').html(_html); 
    }); 
});