Question

在另一个问题中，有人转向我使用这种编写jQuery .append()的方法，但我似乎无法让它工作。控制台返回错误，“意外的字符串”，但我无法弄清楚我做错了什么。

不工作：

$(".create-form").submit(function(event){
    var title = $("#story-name").val();
    copy = $("#story-content").val();
    $(".storyboard").append(
        $("<li/>", className: "story").html(
            $("<span/>", className: "story-count") +
            $("<span/>", className: "story-title-input", content: title)));
});

我还尝试使用逗号代替第一个附加元素上的“+”和.append()而不是.html()。我可以通过写出所有的HTML来使它工作，但这感觉就像一个更干净的方法。

Answer 1

肯定你缺少{和}来进行json初始化。

$(".create-form").submit(function(event){
    var title = $("#story-name").val();
    copy = $("#story-content").val();
    $(".storyboard").append(
        $("<li/>", { className: "story" }).html(
            $("<span/>", { className: "story-count" }) +
            $("<span/>", { className: "story-title-input", content: title } )));
});

然后我会替换这个

$("<li/>", { className: "story" }).html(
   $("<span/>", { className: "story-count" }) +
   $("<span/>", { className: "story-title-input", content: title } )));

通过

$("<li/>", { className: "story" })
   .append($("<span/>", { "class": "story-count" }))
   .append($("<span/>", { "class": "story-title-input", text: title } ));

Answer 2

此代码无效：

, className: 'story'

您可能正在寻找的是一个对象文字，尝试将参数包装到$('...') {}中，如下所示：

$(".create-form").submit(function(event){
    var title = $("#story-name").val();
    copy = $("#story-content").val();
    $(".storyboard").append(
        $("<li/>", {className: "story"}).html(
            $("<span/>", {className: "story-count"}) +
            $("<span/>", {className: "story-title-input", content: title})));
});

Answer 3

我认为这更具可读性，也是一种更好的方法：

$('.create-form').on('submit', function(e){
    e.preventDefault();
    var title = $('#story-name').val(),
        copy  = $("#story-content").val(),
        li    = $('<li />',   {'class': 'story'}),
        span1 = $('<span />', {'class': 'story-count'}),
        span2 = $('<span />', {'class': 'story-title-input', text: title});

    $(".storyboard").append( li.append(span1, span2) );
});

您需要为元素属性使用对象

如何更正此jquery追加

3 个答案: