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 で 1 秒間点滅しますが、その後消えます。私の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 に答える