0

私はこれを持っていますhttp://jsfiddle.net/NgEpS/1/基本的に、各フォームのテキストエリアの値を取得し、値を子divに追加しています。最初の送信後はすべてうまくいきますが、同じフォームを複数回送信すると、スクリプトが以前のすべての返信を複製し、これを回避する方法があるかどうか疑問に思います。

HTML:

        <div class="post-container">
            <form class="reply-form">
                <div class="reply-box">
                    <textarea placeholder="Reply box 1..." columns="10" rows="1" name="comment-input"></textarea>
                    <input type="submit" value="Send">
                </div>
                <div class="post-dropdown"></div>
                <div class="post-dropdown-content">
                    <div class="post-dropdown-reply">1</div>
                </div>
            </form>
        </div>

        <div class="post-container">
            <form class="reply-form">
                <div class="reply-box">
                    <textarea placeholder="Reply box 2..." columns="10" rows="1" name="comment-input"></textarea>
                    <input type="submit" value="Send">
                </div>
                <div class="post-dropdown"></div>
                <div class="post-dropdown-content">
                    <div class="post-dropdown-reply hidden"></div>
                </div>
            </form>
        </div>

        <div class="post-container">
            <form class="reply-form">
                <div class="reply-box">
                    <textarea placeholder="Reply box 3..." columns="10" rows="1" name="comment-input"></textarea>
                    <input type="submit" value="Send">
                </div>
                <div class="post-dropdown"></div>
                <div class="post-dropdown-content">
                    <div class="post-dropdown-reply">1</div>
                    <div class="post-dropdown-reply">2</div>
                    <div class="post-dropdown-reply">3</div>
                    <div class="post-dropdown-reply">4</div>
                </div>
            </form>
        </div>
        p​

JavaScript:

        function gettingReplyVal() {

            $('.reply-form').submit(function(e) {
                var post_clone =    $('.post-dropdown-content').first().clone();

                var textAreaValue = $(this).find('textarea').val();

                 $(post_clone).insertBefore($(this).f ind(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue); 

                e.preventDefault();

            });
        }

        gettingReplyVal();
4

1 に答える 1

1

この行で

$(post_clone).insertBefore($(this).find(".post-dropdown-content")).find('.post-dropdown-reply').html(textAreaValue);

$(this).find(".post-dropdown-content")内のすべての post-dropdown-content 要素を返しますthis。最初に送信を押したときは 1 つしかないので、通常どおりに動作しますが、2 回目は 2 つ、3 回目は 3 つというように...

$(this).find(".post-dropdown-content").first()代わりに使用

$(post_clone).insertBefore($(this).find(".post-dropdown-content").first()).find('.post-dropdown-reply').html(textAreaValue);
于 2012-11-28T23:56:51.467 に答える