未定义不是函数（AJAX、PHP、jQuery）

Question

我对@9​​87654321@ 和 AJAX 很陌生，所以如果我很愚蠢，我深表歉意。

我的 AJAX jQuery 脚本出现错误。 我正在通过 AJAX 检索数据，以便在我的页面上动态显示。 JSON 文件返回一个数组，该数组必须被迭代并显示在每个项目的 DIV 中。 JSON 是：

[{"id":1, "user_id":14, "title":"The Title", "thumbnail":"image.jpg", "summary":"summary of post", "content":"content info here", "category":"Graphic Design", "sub_category":"Adobe Photoshop", "views":0, "published":0, "created_at":"2015-04-16 00:09:57", "updated_at":"2015-04-16 00:09:57"}, {and so on...}]

jQuery 是：

function retrieveTutorials()
{
	$.ajax({
	    type: "GET",
	    url: "/tutorials/retrieve",
	    dataType: "json",
	    success: function(data){
          var tutorial = ('')
            $.each(data, function(){
            
                     tutorial.append($(  '<div class="generatedbox"><img src="images/tutorial_upload/' + this.thumbnail + '" /><h1>' + this.title + '</h1><p>' + this.summary + '</p><p class="date">' + this.created_at + '</p></div>'))
            });
            
          $("#generated-content").empty().append(tutorial);
            
		},
		error: function() {
			alert("An error occurred while processing XML file.");
		}
	});
}

我目前收到的错误是“Uncaught TypeError: undefined is not a function”，它指的是以下部分

tutorial.append($(  '<div class="generatedbox"><img src="images/tutorial_upload/' + this.thumbnail + '" /><h1>' + this.title + '</h1><p>' + this.summary + '</p><p class="date">' + this.created_at + '</p></div>'))

关于我哪里出错了有什么想法吗？ 我之前使用过非常相似的代码，效果很好

Answer 1

试试这个

var tutorial = $('<div></div>');

Answer 2

您应该选择任何 DOM 元素并将其分配给教程变量，如下所示：

var tutorial = $('someCSSselector');

Answer 3

因为您在('') 上调用.append()，所以出现错误。 .append() 是一个 jQuery 函数，但 ('') 是一个空字符串，而不是一个 jQuery 对象。

你可以这样做：

var tutorial = $('<div>');
...
$("#generated-content").empty().append(tutorial.html());

Answer 4

你应该先定义你的div对象，定义它的时候可以保留generatedbox类。然后，您可以省略附加内容中的div。

  var tutorial = $('<div class="generatedbox">')
  $.each(data, function(){            
        tutorial.append($('<img src="images/tutorial_upload/' + this.thumbnail + '" /><h1>' + this.title + '</h1><p>' + this.summary + '</p><p class="date">' + this.created_at + '</p>'))
  });