Question

我正在练习jQuery并尝试在其中编写一些交互用户提交单词（标签），然后在<div id="currentTags"></div>中显示为新的DOM元素。然而，newTag闪烁然后立即消失。

我错过了什么？

$("form").submit(function() {
  var $newTag = $("input:first").val();
  if ($newTag.length < 20) {
    // adds an a success alert in an empty span
    $("span").text("Added. Add more?").show();
    $("<div class='insertedTag'>"+$newTag+"</div>").insertAfter("#currentTags");
    return true;
  }
  $("span").text("Less than 20 characters please.").show().fadeOut(2500);
  return false;
});

Answer 1

您的return true语句可能导致表单提交。您希望在每种情况下都返回false（或使用preventDefault（）来停止操作）。我可以看到你认为你想要在用户做正确的事情时返回true而在错误的时候返回false，但是你实际上是向submit事件返回一个值告诉它：

true =是，请提交此表单

false =不，不提交表格

请改为尝试：

$("form").submit(function(e) {
e.preventDefault();
// rest of logic
}

每个事件都有一个隐含的参数（通常称为“e”，就像我在这里做的那样），你可以在其上调用preventDefault（）来停止正常的操作（在这种情况下，停止提交表单）。

Answer 2

为什么要在表单中包装如此简单的东西？我这样做的唯一原因是使用ajax并且在javascript被禁用的情况下需要它优雅地降级。

您正在寻找的内容可以简化为：

$(document).ready(function() {
    $("#id_of_add_button").click(function() {
        var newTag = $("input:first").val(); 

        if (newTag.length < 20) { // adds a success alert in an empty span 
            $("span").text("Added. Add more?").show(); 
            $("#currentTags").after(" " + newTag); 
        } else {
            $("span").text("Less than 20 characters please.").show().delay(2500).fadeOut(500);
        }
    });
});

jquery：插入新的DOM元素消失

2 个答案: