未捕获的类型错误：无法读取未定义的属性“createDocumentFragment”

Posted 2023-05-07

【中文标题】未捕获的类型错误：无法读取未定义的属性“createDocumentFragment”

【英文标题】：Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

【发布时间】：2015-03-26 12:09:45

【问题描述】：

我正在尝试抓取网页并加载到引导程序 2.3.2 弹出窗口中。到目前为止，我有：

$.ajax(
  type: "POST",
  url: "AjaxUpdate/gethtml",
  data: 
    u: 'http://***.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");

当我激活此代码时，我收到错误：

这里有什么问题，我该如何解决？

jsfiddle

【问题讨论】：

好问题。 Twitter bootstrap 2.3.x 根本不使用片段。你能在小提琴中重现错误吗？也许您正在使用其他一些库，试图对标记做一些事情，比如 react.js 或类似的？只是理论上。

你能指定错误发生在哪一行吗？您自己的代码中的行号将被埋在堆栈中的某个地方。

【参考方案1】：

错误的原因是您的.done() 回调中的$(this).html($link);。

回调中的this 指的是[...]object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax)[...]，而不是$(".btn.btn-navbar")（或者任何你期望它应该指的地方）。

抛出错误是因为 jQuery 将在您执行 this 时在您传递的对象的 ownerDocument 上内部调用 .createDocumentFragment() $(this).html($link); 但在您的代码中 this 不是 DOMElement，并且不有一个ownerDocument。因为ownerDocument 是undefined，这就是createDocumentFragment 被undefined 调用的原因。

您需要为您的ajax 请求使用context 选项。或者，您需要将 reference 保存到要更改的 DOMElement 变量中，该变量可以在回调中访问。

【讨论】：

尽管这可能是一个很好的答案，但它并不能解释神秘的“Cannot read property 'createDocumentFragment' of undefined”错误。

@davidkonrad 编辑了答案以添加此信息

这听起来很合理 +1。 Twitter 引导程序严重依赖 jQuery。好收获！

谢谢，我能帮个忙吗？我对js非常缺乏经验。我想我知道如何进行参考修复，但我可以请你告诉我如何在这种情况下使用小提琴作为基础来设置上下文属性吗？

@user61629 您只需将context : theElementYouWant, 添加到您的$.ajax() 选项（有关更多详细信息，您应该查看我已链接的jQuery.ajax 的文档），然后添加this在回调中将引用theElementYouWant。我不能举个例子，因为我不知道 this 应该是什么元素；）

【参考方案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);
    );
);

【参考方案3】：

发生该错误是因为 this 通常指的是 ajax 对象而不是 DOM 元素，以防止在如下变量中分配 this：

/* To add add-on-test in cart */
$(document).on("click", ".aish_test", function()
          var thisButton = this; //Like this assign variable to this
          var array_coming = '<?php echo json_encode($order_summary_array);?>'; //Json Encoding array intersect variable
          //Converting in array
          var array_check = $.parseJSON(array_coming);
          var result = [];

            for(var i in array_check)
                result.push(array_check [i]);
            

          //Fetching data:
          var test_data_name = $(this).attr("data-name");
          var test_data_price = $(this).attr("data-price");
          var test_data_id = $(this).attr("data-id");
        
         if($.inArray(test_data_id, result) == -1)
             
            //static html 
            var static_html = '<tr><td>'+test_data_name+'</td>';
            static_html += '<td>&#163;'+test_data_price+'</td>';
            static_html += '<td><button type="button" class="close remove_add_test" data-id="'+test_data_id+'" data-price="'+test_data_price+'" aria-hidden="true"> <i class="fa fa-trash-o"></i> </button></td></tr>'; 
               /*ajax call*/
            $.ajax(
                    
                        type: 'POST',
                        url: 'scripts/ajax/index.php',
                        data: 
                            method: 'addtocart',
                            id: test_data_id,
                            name: test_data_name,
                            price: test_data_price
                        ,
                        dataType: 'json',
                        success: function(data) 
                            if (data.RESULT == 0) 
                                $(thisButton).text("added to cart"); //Use again like this
                                $(".cart-number").text(data.productcount);
                                $.growl.notice(
                                    title: "Shopping Cart",
                                    message: data.MSG
                                );
                            $('#myTable tr:first-child').after(static_html);
                             else if (data.RESULT == 2) 
                                $.growl.error(
                                    title: "Shopping Cart",
                                    message: data.MSG
                                );
                             else 
                                $.growl.error(
                                    title: "Shopping Cart",
                                    message: data.MSG
                                );
                            
                        
                    ); 
            
            else
            
                $.growl.error(
                                    title: "Shopping Cart",
                                    message: "Already in Cart"
                                );
            
            
    );