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

【问题标题】：Uncaught TypeError: Cannot read property 'ownerDocument' of undefined未捕获的类型错误：无法读取未定义的属性“ownerDocument”
【发布时间】：2013-07-09 19:29:28
【问题描述】：

我正在自学 AJAX 以 AJAXify 我的网站。在我的模板中，我有以下 JS 代码从视图中获取一些 JSON 数据，然后将数据附加到 div。

function filter(type) {
  $.getJSON(
    '/activity_stream/global-activity-stream/', 
    {xhr: "true", filter: type}, 
    function(data) {
      $('.mainContent').children().remove();
      $(data).appendTo('.mainContent');
    });
  }

  $(".btn").click(function () { 
    filter("recent"); 
  });
}

我认为我的视图返回了正确的 JSON，但现在没有将数据添加到 .mainContent div。

它给出了这个错误：

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

【问题讨论】：

如果您要返回 JSON，那么仅将其附加到 DOM 中是行不通的。你预计会发生什么？
我想我希望它能够将数据加载到 div 中......我怎样才能做到这一点？我对这个 AJAXy 东西很陌生...
只需将$('.mainContent').children().remove(); $(data).appendTo('.mainContent'); 更改为$('.mainContent').html(data); 问题是，当您执行appendTo 时，jquery 期望$(data) 是一个dom 节点，在这种情况下很可能不是
谢谢，虽然现在返回的 JSON 数据没有显示在 div 中，但它帮助解决了该错误：-(
@karthikr 只是将原始 JSON 转储到页面上，但是是的 $('.mainContent').html(data); 应该显示来自服务器的任何内容（作为原始 JSON 文本）。（在此之前无需删除子节点。）您可以使用浏览器调试工具来检查并查看服务器返回的确切内容。

标签： javascript jquery django json

【解决方案1】：

确保您将选择器传递给 jQuery，而不是某种形式的数据：

$( '.my-selector' )

不是：

$( [ 'my-data' ] )

【讨论】：

这对我来说很合适。我认为问题出在我的 jQuery 函数上，但实际上我是一个数组，而不是我通常的单个 obj。谢谢大佬

【解决方案2】：

我遇到了类似的问题。我使用的是 jQuery.map，但最后忘记使用 jQuery.map(...).get() 来处理普通数组。

【讨论】：

【解决方案3】：

$elms.each() 内部也出现了同样的问题。

因为：

您传递给.each(Function) 的函数公开（至少）两个参数；第一个是索引，第二个是列表中当前元素中的元素，并且
因为其他类似的循环方法给当前数组中索引之前的元素

你可能会想这样做：

$elms.each((item) => $(item).addClass('wrong'));

当这是你需要的时候：

$elms.each((index, item) => $(item).addClass('wrong'));

【讨论】：

【解决方案4】：

如果您要附加到 DOM，请确保内容兼容：

modal.find ('div.modal-body').append (content) // check content

【讨论】：

【解决方案5】：

如果使用 ES6 anon 函数，会和$(this)冲突

这行得通：

$('.dna-list').on('click', '.card', function(e) {
  console.log($(this));
});

这不起作用：

$('.dna-list').on('click', '.card', (e) => {
  console.log($(this));
});

【讨论】：

我的情况，这是正确的答案。我一直忘记箭头函数将它们的this 绑定到最近的常规函数this。
如果它正在触发，请使用e.currentTarget 之类的事件，或者它可能是$(e.currentTarget)。它应该和 this 一样工作，同时仍然允许匿名函数。

【解决方案6】：

就我而言，发生此错误是因为我的 HTML 有一个尾随换行符。

var myHtml = '<p>\
    This should work.\
    But does not.\
</p>\
';

jQuery('.something').append(myHtml); // this causes the error

为避免错误，您只需修剪 HTML。

jQuery('.something').append(jQuery.trim(myHtml)); // this works

【讨论】：