jquery : 새로운 DOM 요소 삽입이 사라짐

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

진실한 진술로 인해 양식이 제출 될 수 있습니다. 모든 경우에 false를 반환하거나 preventDefault()를 사용하여 작업을 중지하려고합니다. 내가 잘못했을 때 사용자가 일을 올바르게 할 때 true로 되돌릴 것을 생각할 수 있다고 생각하지만 실제로 제출 이벤트에 값을 반환하면 다음 중 하나를 말합니다.

true = 예,이 양식을 제출하십시오.

거짓 = 아니, 대신에이 시도 형태

를 제출하지 않습니다

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

모든 이벤트가 (내가 여기서 뭐하는 것 같은 일반적으로 "E"이라한다) 묵시적 매개 변수가 있습니다 preventDefault()를 호출하여 정상 동작을 중지 할 수 있습니다. (이 경우 양식 제출이 중단됩니다).

Answer 2

왜 간단한 형태로 꾸미는거야? 내가 할 수있는 유일한 이유는 아약스를 사용하고 자바 스크립트가 비활성화 된 경우 정상적으로 성능이 저하 될 필요가있을 때입니다. 이 같은 단순화 할 수있다 찾고있는 무엇

:

$(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); 
     } 
    }); 
});