无法将整个字符串存储为数据属性

Question

我目前正在尝试从HTML数据属性传递数据，如下所示：

// From
$(".search-results").append('<div data-id=' + movie.id + ' data-title=' + movie.title + ...'

//To
$('#movie-info').append('<h5>' + ($(this).data("title")) + '</h5>');

麻烦的是只传递了电影字符串中的第一个单词。不太清楚为什么。

Answer 1

当属性可以包含空格时，您需要分隔符：

$(".search-results").append(
   '<div data-id="' + movie.id + '" data-title="' + movie.title + '"...'

您还应该考虑是否需要HTML编码，即它是否包含"，<，>或&等字符。

---

避免创建HTML代码的一个简单方法是创建元素：

var div = $('<div>').data({ id: movie.id, title: movie.title });
$(".search-results").append(div);

使用该值时也一样，以避免将标题解释为HTML：

var header = $('<h5>').text($(this).data("title"));
$('#movie-info').append(header);

Answer 2

属性的值应该用引号括起来。 它应该是这样的：

// From
$(".search-results").append('<div data-id="' + movie.id + '" data-title="' + movie.title + '"...');

//To
$('#movie-info').append('<h5>' + ($(this).data("title")) + '</h5>');