Question

我有一个小'html'表单，里面只有'select'。当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);
            });
        });

    });

Aand这是使用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");

每次更换只执行一次。

'console.log("2");'

然而，它执行'n'次。我不明白为什么，找到能解决问题的东西对我来说有点困难，也许你会有一个想法？

提前致谢。

Answer 1

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

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

您可以在此处找到工作代码：http://jsfiddle.net/z3UtC/1/

或者在函数调用之外定义提交（关注Simon的评论）例如：http://jsfiddle.net/z3UtC/2/

ajax表单为每第n次选择onchange事件触发发送了n次

1 个答案: