Uncaught TypeError: Не удается прочитать свойство 'createDocumentFragment' undefined

Я пытаюсь захватить веб-страницу и загрузить в загрузочный файл 2.3.2 popover. До сих пор я:

$.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");

Когда я активирую этот код, я получаю ошибку:

Uncaught TypeError: Не удается прочитать свойство 'createDocumentFragment' undefined

В чем проблема и как ее исправить?

jsfiddle

Ответы

Ответ 1

Причиной ошибки является $(this).html($link); в вашем обратном вызове .done().

this в обратном вызове относится к [...]object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax)[...], а не к $(".btn.btn-navbar") (или то, что вы ожидаете там, где оно должно ссылаться).

Ошибка вызывается из-за того, что jQuery будет внутренне вызывать .createDocumentFragment() на ownerDocument объекта, который вы передаете с this при выполнении $(this).html($link);, но в вашем коде this не является DOMElement и не выполняет имеют ownerDocument. Из-за этого ownerDocument есть undefined, и именно по этой причине createDocumentFragment вызывается на undefined.

Вам нужно использовать параметр context для вашего запроса ajax. Или вам нужно сохранить ссылку на DOMElement, который вы хотите изменить, в переменной, к которой вы можете получить доступ в обратном вызове.

Ответ 2

Эта ошибка возникает из-за того, что this ссылается на объект ajax, а не на элемент DOM, чтобы решить эту проблему, вы можете сделать что-то вроде этого:

$('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);
    });
});