jquery - jquery：ウェブサイトでいくつかの同一のフォームの1つを送信する

Question

私のサイトには同じフォームがいくつかありますが、そのうちの 1 つを送信すると、奇妙な動作が発生します。これが私のセットアップです：

サイトに ID "#modelform" のフォームがあります。#modelform が送信されると、「.waldform」というクラス識別子を持つ 2 番目のフォームが表示されます。#modelform は複数回送信できるため、同じ .waldforms がサイトに複数存在する可能性があります。.waldform を送信すると、python 関数が呼び出され、返された値が Web サイトの本文に追加されます。

問題は次のとおりです。#modelform を 2 回送信し、サイトに 2 つの .waldforms があるとします。作成された最初の .waldform を送信すると、返された値がサイトの本文に 2 回追加されます。2 番目の .waldform を送信すると、返された値が本体に 1 回だけ追加されます。同様に、3 つの .waldform がある場合、最初の .waldform はその値を 3 回追加し、2 番目の .waldform はその値を 2 回追加し、3 番目は 1 回だけ追加します。

サイトにいくつ存在するかに関係なく、各 .waldform にその値を一度だけ追加したいと思います。

何かご意見は？

これが私のjqueryです：

var $counter = 0

$("#modelform").submit(function() {

    $counter++;

    $('body').append($counter) ;

    //MODEL FORM
    $.post('/estimate', {name: $("#mymodel").val()}, function(data) {

        var $a_var = data['title']
        var $element = $('<div class="item">' + $a_var + '</div><br>');

        $('body').append($element) ;




        //WALD FORM
        $('body').append('<form class="waldform" action="#" method="post"><input type="text" id="waldnum" value="' + $counter + '"/><input type="submit" value="Wald Test" /></form>');

        $(".waldform").submit(function() {

        //post the form values via AJAX...
        $.post('/wald', {name: $(this).find('#waldnum').val()}, function(data) {

            var $a_var = data['title']
            var $element = $('<div class="item">' + $a_var + '</div><br>');

            $('body').append($element);



            });

            return false ;
        });



    });

    return false ;
});