會閃爍起來，然後加入jQuery的DIV消失

Question

添加用戶輸入的內容到一個新的div如下：

HTML：

<div id="mform"> 
<form> 
    <textarea rows="3" cols="48" id="message">Leave a message here</textarea> 
    <input class="post" type="submit" value="Post"> 
</form> 
</div>  

<div id="mboard"> 

</div> 

有支撐的jQuery：

$(document).ready(function() { 
$(".post").click(function() { 
    posted = $("#message").val(); 
    jQuery("<div/>", { 
     id: "msg", 
     css: {opacity:1.0}, 
     text: posted, 
     }).prependTo("#mboard"); 
     console.log("here"); 
}); 

}) 

它似乎通過確定，並且內容在新的div中閃爍一秒，但隨後消失。同樣的事情發生在我的console.log中。

我已經指定了不透明度，所以一旦這個工作正常，我可以將它設置爲0，然後添加一個.animate以在內容發佈後淡入淡出。

Answer 1

原因是您的輸入按鈕是一個提交按鈕，所以提交表單回自己，這意味着頁面重新加載。

改變你的JS到這一點：

$(".post").click(function (e) { 
    posted = $("#message").val(); 
    jQuery("<div/>", { 
     id: "msg", 
     css: {opacity:1.0}, 
     text: posted, 
     }).prependTo("#mboard"); 
     console.log("here"); 
    e.preventDefault(); 
}); 

注意添加參數e（代表事件）的點擊處理程序，並調用e.preventDefault()停止提交表單。

活生生的例子：http://jsfiddle.net/RmSZz/

Answer 2

那是因爲你執行提交請求，然後重新加載整個頁面。如果要取消提交請求，請添加return false;