Jquery问题: Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

Question

我目前正在使用 Meteor 框架构建一个网站。现在，我正在尝试获取它，以便当我单击 DOM 中的某个元素(通过 handle 呈现)时，新元素会附加到当前单击的元素。我正在使用 jquery 执行此操作，并包含所有正确的包。不幸的是，当我测试我所拥有的内容时，我收到此错误:Uncaught TypeError:无法读取未定义的属性“createDocumentFragment”。我在网上查了一下，似乎无法弄清楚为什么会发生这种情况。

这里是所有相关代码和注释，以解释我为什么要做我正在做的事情:

类别模板(这是我要附加到的元素):

<template name="category">
<div class="category">
    <h2 class="text-center category-title"> {{title}} </h2>
    <div class="topics"> </div> <!-- where I want to append -->
</div>
</template>

事件处理代码:

Template.category.events({
   'click .category': function(e){
        var elem = $(this > '.topics'); //grab div to append to
        var category = this;

        console.log(elem); //will log what appears to be a jquery object (output below)

        for (var i = 0; i < category.topics.length; i++){ //loop to append all new elements
            var html = '<div>' + category.topics[i] + '</div>'; 
            elem.append(html); //this is where the error occurs
        }
    }
})

日志输出:

[true, jquery: "1.11.0", constructor: function, selector: "", toArray: function, get: function…]

有人知道我做错了什么吗？

Answer 1

1)这一行:

var elem = $(this > '.topics')

你这是什么意思？首先，这里的 this 是一个模板数据上下文，不是 DOM 元素，当然也不是选择器字符串。最重要的是，您使用 > 比较，它返回 false，因此您实际上留下了 $(false) – 可能不是什么你想要的。

要获取模板 DOM 元素，您应该使用模板方法而不是全局方法。就您而言，最有可能的是:

var elem = t.$('.topics');

编辑:当然，您应该将函数定义为 function(e, t) 以在此处获取模板实例。

2) 你真的不应该以这种方式操作 DOM。您错过了 react 性、模板优化以及 Meteor 已经为您做的一切。 “Meteor 方式”是在模板中包含您需要的 HTML，并通过 react 变量切换它是显示还是隐藏。