每触发一次选择 onchange 事件，ajax 表单发送 n 次

Question

我有一个小的“html”表单，里面只有一个“选择”。当 onchange 事件被触发时， 我希望将此表单作为 AJAX 请求发送，并在发生错误时显示 jscript 警报。 服务器现在为每个请求发送一个错误代码。 我这样设置它来测试弹出警报。

这是我的 HTML 代码：

<div class="infoCommande" id="3">
    <div class="libelleEtatColis">
        <form method="post">

            <input type='hidden' name='idCommande' value="3"></input>

            <select name='etatCommande'>
                <option  value="-1"></option>
                <option selected value="1">EN PREPARATION</option>
                <option  value="2">ENVOYE</option>
                <option  value="3">ARCHIVE</option>
            </select>

            <div class="loadingFeedback"></div>
            <br />
            <br />
        </form>
    </div>
  </div>

这是我的 javascript。 第一个 js 块将 'addEtatColisForm' 设置为触发 onchange 事件时将调用的函数：

$( document ).ready(function() {

    $('.infoCommande').each(function(){
        var idCmd = this.id;

        $(this).find('.libelleEtatColis').find('select').change(
            function(){
                addEtatColisForm(this, idCmd);
            });
        });

    });

这是使用 AJAX 请求处理表单提交的函数：

    function addEtatColisForm(htmlObj, idCmd){
        var frm = $(htmlObj).closest('form');

        console.log("1");

        frm.submit(function (ev){
            console.log("2");

            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: frm.serialize(),
                success: function(donnees){
                    var obj = jQuery.parseJSON(donnees);
                    if( !(obj.error)){
                        frm.find('select').val(obj.result);
                    }else{
                        alert('Une erreur est arrivée lors de la modification de l\'état du colis.');
                    }
                }
            });

            ev.preventDefault();
        });

        //Submit form
        console.log("3");
        $(frm).trigger('submit');
    }

但是……它并没有像我预期的那样工作…… 第一个 onchange 按预期处理。显示一个弹出警报，仅此而已。 第二个 onchange 将触发 2 个警报窗口。 2 将因第三次 onchange 被解雇... 等等。

行：

console.log("1");
console.log("3");

每次 onchange 只执行一次。

'console.log("2");'

但是，它执行了“n”次。我不明白为什么，我很难找到可以解决问题的东西，也许你会有一个想法？

提前致谢。

Answer 1

每次调用 addEtatColisForm 函数时，都会将提交函数绑定到表单。 在绑定之前先尝试解绑。例如：

frm.unbind('submit').bind("submit", function (ev){

你可以在这里找到工作代码：http://jsfiddle.net/z3UtC/1/

或者在函数调用之外定义提交（按照西蒙的cmets） 例如：http://jsfiddle.net/z3UtC/2/