1

将用户输入的内容添加到新的 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 以在内容发布后淡化内容。

4

2 回答 2

4

原因是您的输入按钮是提交按钮，将表单提交回自身也是如此，这意味着页面被重新加载。

将您的 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/

于 2012-05-29T07:47:48.207 回答
1

这是因为您执行了提交请求，然后重新加载了整个页面。如果要取消提交请求，请添加return false;

于 2012-05-29T07:49:42.357 回答