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;

添加闪烁的jQuery div然后消失

2 个答案: