blur/focusout doesn't work

Question

I have multiple divs with the same class-'.new-contact.clearfix.invite'. The divs contain some inputs.

I want to perform validation on the form (which its class is 'invitePartners) only when I click/enter some input in different line (each div is a different line).

I tried the following, but the event is not triggered:

  $('.invite').on('blur','.new-contact.clearfix.invite', function () {
 $('.invitePartners').valid()
})

Example of the div's HTML:

<div class="row">
    <div class="new-contact clearfix invite">
            <div class="first-name invite">
                <input type="text" id="firstName1" class="signup-input firstName required" name="first[1]" placeholder="">
            </div>
        <div class="last-name">
                <input type="text" id="lastName1" class="signup-input lastName" name="last[1]" placeholder="optional">
            </div>
                <input type="text" data-index="1" id="inputMail1" class="signup-input mail" name="email[1]" placeholder="e.g. [email protected]" aria-invalid="true">
                <span class="common-sprite sign-up-cross first clone"></span>
            </div>
    </div>

</div>

Answer 1

Quote from JQuery on help page :

The focus and blur events are specified by the W3C to not bubble, but jQuery defines cross-browser focusin and focusout events that do bubble.

This mean that your blur event don't go up the DOM when fired from .new-contact.clearfix.invite and so cannot be catch up by .invite

Answer 2

$('body').on('blur','.new-contact.clearfix.invite input', function () {
   $('.invitePartners').valid()
});

Answer 3

Try .focusout() ...

$('.new-contact.clearfix.invite').focusout(function () {
    $('.invitePartners').valid();
});

It's not really clear what your elements are, you should post your HTML in your question. If you are just trying to use elements that are related to the element blurred, you may need to use something like ...

$('.invitePartners', this).valid();