多个事件被触发

Question

我在下面有一个简单的脚本，可以动态创建新的 html 表单。当我尝试单独提交一个时，它会提交（this）点击的表单，然后提交所有紧随其后的表单。

实在看不出这里有什么bug（代码）：

<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

假设其余代码正常工作，类似这样的事情

<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

因为它们是动态元素，所以使用 off() 函数和 on() 函数：

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

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

});

这样提交功能只会在相应的表单上被触发。