Question

我的jquery on函数有问题，有时脚本执行多次，由我的控制台调用中的XHR日志多次指示。下面是有时会多次执行的脚本。

$('body').on('blur', 'input.required', function () {
    var i = 0;
    var row = $(this).closest('tr');
    var SID = row.find('.students-cb');
    row.find('input.required').each(function () {
        if ($(this).val().length > 0) {
            i++;
        }
    });
    if (i == 3) {
        var fname = row.find('input.required').eq(0).val();
        var lname = row.find('input.required').eq(1).val();
        var grade = row.find('select[name=grade]').eq(0).val();
        var pass = row.find('input.required').eq(2).val();
        var json = {
            "baseRequest": {
                "ssoUserName": ssoUserName,
                "authToken": authToken,
                "ncesNbr": "1926"
            },
            "firstName": fname,
            "lastName": lname,
            "password": pass,
            "gender": "m",
            "gradeLevel": grade,
            "passwordComplexityLevel": grade,
            "handedPreference": "left"
        };
        var SIDval = SID.val() == 'on' ? '' : (SID.val() == 'off' ? '' : SID.val());

        if (SIDval.length > 0) { // update
            json.SID = SID.val();
            poster('hwtStudentWS/updateStudent', json, function (data) {
                if (data != false) {
                    if (isTyped) {
                        if ($('.success_update').length == 0) {
                            var msg = '<span class="success_update pull-right" style="font-size:14px;font-weight:bold;color:#00ca00;">All changes saved</span>';
                            $(msg).appendTo('#class-info');
                        } else {
                            $('.success_update').show();
                        }
                        setTimeout(function () {
                            $('.success_update').fadeOut();
                        }, 2000);
                        isTyped = false;
                    }
                }
            }, 'http://url.com/');
        } else { //create
            if (grade.length > 0) {
                json.CID = CID;
                json.teacherUID = teacherUID;
                poster('hwtStudentWS/createStudent', json, function (data) {
                    SID.val(data.SID);
                    SID.attr('data-cid', CID);
                    SID.attr('data-studentname', data.firstName + ' ' + data.lastName);
                    SID.closest('tr').find('.required').addClass('saved');
                    if ($('.success').length == 0) {
                        var msg = '<span class="success pull-right" style="font-size:14px;font-weight:bold;color:#00ca00;">License has been assigned</span>';
                        $(msg).appendTo('#class-info');
                    } else {
                        $('.success').show();
                    }
                    setTimeout(function () {
                        $('.success').fadeOut();
                    }, 2000);
                }, 'http://url.com/');
            } else {
                alert('please select grade level');
            }

        }
    }
});

我的代码有问题吗？如何防止多次执行此on。任何帮助将不胜感激

HTML

...
<tr>
  <td>
    <input type="checkbox" class="select students-cb" />
    <div class="checkbox-replacement"></div>
  </td>
    <td width="15%"><input type="text" name="fname" class="col-md-12 required" placeholder="First Name" /></td>
    <td width="15%"><input type="text" name="lname" class="col-md-12 required" placeholder="Last Name" /></td>
    <td width="15%"><select name="" class="custom-arrow grade">
    <option value="">Grade Level</option>
    <option value="k">K</option>
        <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select></td>
    <td width="15%"><input type="password" name="password" class="col-md-12 required" placeholder="Password" /></td>
    <td><select name="licenses" class="custom-arrow licenses product-dropdown"></select></td>
</tr>
...

PS：<tr>可以多于一个

Answer 1

IIRC jQuery .on（）为事件添加新处理程序。

可能您的脚本被多次调用，因此相同的函数会不断添加到事件中。

首先尝试取消关联事件：

$('body')
    .off('blur', 'input.required')              // remove 'blur' event handler first
    .on('blur', 'input.required', function () { // then, add the new handler
    ... [snip] ...
    });

jquery有时会执行多次

1 个答案: