Question

我目前正在使用Meteor框架构建一个网站。现在，我试图得到它，以便当我点击DOM中的元素（通过把手渲染）时，新元素将附加到当前单击的元素。我正在使用jquery执行此操作并包含所有正确的包。不幸的是，当我测试我的内容时，我收到此错误：Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined。我在网上看了看，我似乎无法弄清楚为什么会这样。

以下是所有相关代码和评论，以解释我为什么这样做：

类别模板（这是我试图追加的元素）：

<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。你错过了反应性，模板优化以及Meteor已经为你做的一切。 “流星方式”将是您已经在模板中使用的HTML，并切换它是否被反应变量显示或隐藏。

Jquery问题：Uncaught TypeError：无法读取属性＆＃39; createDocumentFragment＆＃39;未定义的

1 个答案: