Gruppe Klasse Mitglied Formelemente für focusout()

Question

Ich versuche, eine Funktion zu erstellen, die ausgelöst wird, wenn eine der Klasse Elemente den Fokus verlieren:

<h5>ON Time</h5> 
<div class = 'timeSetting'><form id = 'weekendStart'> 
<input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onHour' value='6' name = 'value' min='1' max='12'><input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onMinute' value='30' name = 'value' min='0' max='59'> 
<select id = 'weekendStartAmPm'> 
<option value = 'weekendStartAm'>am</option> 
<option value='weekendStartPm'>pm</option> 
</select> 
</form></div> 
<h5>OFF Time</h5> 
<div class = 'timeSetting'><form> 
<input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onHour' value='10' name = 'value' min='1' max='12'><input type='number' inputmode= 'numeric' pattern='[0-9]*' id = 'onMinute' value='00' name = 'value' min='0' max='59'> 
<select id = 'weekdayStartAmPm'> 
<option value='wkdayStartPm'>pm</option> 
<option value = 'wkdayStartAm'>am</option> 
</select> 
</form></div> 

Ich weiß, das ist nicht richtig, aber ich möchte so etwas wie es:

$('.timeSetting').focusout(function(){ 
    console.log('lost focus'); 
}); 

wo Benutzer kann Tab zwischen Formularelementen und bearbeiten übertragen Fokus und einmal irgendwelche (und alle) Mitglieder der Klasse verlieren Fokus, dann die Funktion Feuer ...

Answer 1

Hier ist ein Beispiel, basierend auf etwas, das ich vor ein paar Jahren wieder auf SO Gruppen von Fokus zu handhaben schrieb: http://jsfiddle.net/TrueBlueAussie/0y2dvxpf/6/

$('div.timeSetting').on('focus focusin', 'input,select', function() { 
    var $editor = $(this).closest('.timeSetting'); 
    $editor.addClass("focused"); 

}).on('blur focusout','input,select', function() { 
    var $editor = $(this).closest('.timeSetting'); 
    // wait for the new element to be focused 
    setTimeout(function() { 
    // See if the new focused element is in the editor 
    if (!$.contains($editor[0], document.activeElement)) { 
     $editor.removeClass("focused"); 
    } 
    }, 0); 
}); 

Vorerst es zeigt nur den Fokus mit Klassenänderungen, aber man könnte genauso gut Trigger benutzerdefinierte Ereignisse statt und fangen Sie diese auf einem Vorfahren.

Answer 2

Try this:

$("[class] input").focusout(function(){ 
    console.log('lost focus'); 
}); 

Dadurch wird ein beliebiger Eintrag ausgewählt, der in einem Element mit einem Klassenattribut auf einem beliebigen Wert vorhanden ist.

Leere Saiten:

Wenn die attr muss vorhanden sein & einen beliebigen Wert haben könnte (oder gar keine)

jQuery("[href]"); 

Edit: Aber wenn Sie möchten, den Moment zu erfassen, Der Fokus geht von einem div mit class1 zu einem anderen div mit class2. Sie können dies verwenden:

var currentClass = false; 
var leftClass = false; 
$("[class]").focusout(function(){ 
    leftClass = $(this).attr('class'); 
    console.log('lost focus ' + leftClass); 
}); 

$("[class]").focusin(function(){ 
    currentClass = $(this).attr('class'); 

    if(leftClass && leftClass != currentClass) { 
     // Put your code here 
     console.log(" div left " + leftClass); 
    } 
    console.log('in focus ' + currentClass); 
});