Блог

У меня проблема с on функцией jquery, иногда скрипт выполняется многократно, что указывается в журнале 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> может быть более одного

IIRC jQuery .on() добавляет новый обработчик к событию.

Вероятно, ваш скрипт вызывается более одного раза, поэтому одна и та же функция продолжает добавляться к событию.

Сначала попробуйте разорвать связь с событием:

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