多个事件被触发

Question

i have a simple script below that creates new html forms dynamically. When i attempt to submit one individually it submits the (this) clicked on form, and then submits all of the ones that came after it.

Really can't see what the bug is here (code):

<script type="text/javascript">
(function ($) {
$(function () {

    var addFormGroup = function (event) {
        event.preventDefault();

        var $formGroup = $(this).closest('.form-group');
        var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
        var $formGroupClone = $formGroup.clone();

        $(this)
            .toggleClass('btn-success btn-add btn-danger btn-remove')
            .html('–');

        $formGroupClone.find('input').val('');
        $formGroupClone.find('.concept').text('Phone');
        $formGroupClone.insertAfter($formGroup);

        var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
        if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
            $lastFormGroupLast.find('.btn-add').attr('disabled', true);
        }

       $('form').on('submit', function(event) {
        event.preventDefault();
        $(this).attr('disabled', 'disabled');
        $( this ).serialize();
        var weburl = $(this).find(".web_url").val();
        var width = $(this).find(".width").val();//$('.width').val();
        var height = $(this).find(".height").val();//$('.height').val();
        var dee = <?php echo $deet[0]->id; ?>;
        $.post( "mde", { weburl: weburl, width: width, height: height, dee: dee })
          .done(function( data ) {
             u = data;
             alert(u);
          });
        //$.get(u);  
      });

    };

    var removeFormGroup = function (event) {
        event.preventDefault();

        var $formGroup = $(this).closest('.form-group');
        var $multipleFormGroup = $formGroup.closest('.multiple-form-group');

        var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
        if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
            $lastFormGroupLast.find('.btn-add').attr('disabled', false);
        }

        $formGroup.remove();
    };

    var selectFormGroup = function (event) {
        event.preventDefault();

        var $selectGroup = $(this).closest('.input-group-select');
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();

        $selectGroup.find('.concept').text(concept);
        $selectGroup.find('.input-group-select-val').val(param);

    }

    var countFormGroup = function ($form) {
        return $form.find('.form-group').length;
    };

    $(document).on('click', '.btn-add', addFormGroup);
    $(document).on('click', '.btn-remove', removeFormGroup);

});
})(jQuery);
</script>
<script>
    $( document ).ready(function() {
      // Handler for .ready() called.
      $('form').on('submit', function(event) {
        event.preventDefault();
        $(this).attr('disabled', 'disabled');
        $( this ).serialize();
        var weburl = $(this).find(".web_url").val();
        var width = $(this).find(".width").val();//$('.width').val();
        var height = $(this).find(".height").val();//$('.height').val();
        var dee = <?php echo $deet[0]->id; ?>;
        $.post( "mde", { weburl: weburl, width: width, height: height, dee: dee })
          .done(function( data ) {
             u = data;
             alert(u);
          });
        //$.get(u);  
      });

    });
</script>

Answer 1

Something like this assuming the rest of the code works

<script type="text/javascript">
$(function () {

    var addFormGroup = function (event) {
        event.preventDefault();

        var $formGroup = $(this).closest('.form-group');
        var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
        var $formGroupClone = $formGroup.clone();

        $(this)
            .toggleClass('btn-success btn-add btn-danger btn-remove')
            .html('–');

        $formGroupClone.find('input').val('');
        $formGroupClone.find('.concept').text('Phone');
        $formGroupClone.insertAfter($formGroup);

        var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
        if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
            $lastFormGroupLast.find('.btn-add').attr('disabled', true);
        }           
    };

    var removeFormGroup = function (event) {
        event.preventDefault();

        var $formGroup = $(this).closest('.form-group');
        var $multipleFormGroup = $formGroup.closest('.multiple-form-group');

        var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
        if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
            $lastFormGroupLast.find('.btn-add').attr('disabled', false);
        }

        $formGroup.remove();
    };

    var selectFormGroup = function (event) {
        event.preventDefault();

        var $selectGroup = $(this).closest('.input-group-select');
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();

        $selectGroup.find('.concept').text(concept);
        $selectGroup.find('.input-group-select-val').val(param);

    }

    var countFormGroup = function ($form) {
        return $form.find('.form-group').length;
    };

    $(document).on('click', '.btn-add', addFormGroup);
    $(document).on('click', '.btn-remove', removeFormGroup);
    $(document).on('submit','form' function(event) {
        event.preventDefault();
        $(this).attr('disabled', 'disabled');
        // $( this ).serialize(); // not used
        var weburl = $(this).find(".web_url").val();
        var width = $(this).find(".width").val();
        var height = $(this).find(".height").val();
        var dee = <?php echo $deet[0]->id; ?>;
        $.post( "mde", { weburl: weburl, width: width, height: height, dee: dee })
          .done(function( data ) {
             u = data;
             alert(u);
        });
    });
});
</script>

Answer 2

As they are dynamic elements use off() function along with on() function:

$('form').off().on('submit', function(event){
    event.preventDefault();

    ----
    ----
    ----

});

So that submit function will gets fired only on corresponding form.