Question

当使用下面的代码在.container中附加div和p元素时（使用输入中的值），正在创建并自动销毁元素。关于什么是错的任何想法？非常感谢！

 $("#submit").on("click", function(event){
    var textTitle = $("#title").val();
    var textContent = $("#content").val();
    $("#title").val("");
    $("#content").val("");
    $(".container").append("<div class='panel panel-default'><h4>" + textTitle + "</h4></div>");
    $(".container").append("<div class='panel panel-default'><p>" + textContent + "</p></div>");
    event.stopPropagation();
});

Answer 1

使用event.preventDefault代替event.stopPropogation，让它阻止表单提交的默认工作。

Answer 2

听起来您的#submit是输入类型=“提交”并且您提交表单。因为上面的代码在不在表单标记内时工作得很好。

使用.append（）时也要小心，因为它会滞后于浏览器。最好将所有DOM元素组成一个HTML字符串，然后使用append函数。

JS小提琴：https://jsfiddle.net/vxxu3uhw/1/

    $("#submit").on("click", function(event){
        event.preventDefault();
        var textTitle = $("#title").val(),
            textContent = $("#content").val();

        $("#title").add("#content").val("");

        var html = "<div class='panel panel-default'><h4>" + textTitle + "</h4></div>"
                 + <div class='panel panel-default'><p>" + textContent + "</p></div>

        $(".container").append(html);
    });

回复您当前结构的更具体示例，我可以提供更好的帮助。

如果您正在使用表单并输入type =“submit”，则添加event.preventDefault（），您将不会提交表单。

jQuery - .append附加了html元素，然后自动删除html

2 个答案: