Comment lier un événement de flou à un événement de clic en direct ?

Question

J'ai cette fonction :

$('input#auto_results').bind('blur', function(e) {
    $('.result').bind('click', function() {
        return;
    });
    $('#results_container').hide();                                       
}); 

En fait, je voudrais que le conteneur #results_container soit masqué lors d'un flou SAUF si un élément de la classe .result est cliqué.

La fonction ci-dessus ne fonctionne pas

Answer 1

Problème avec votre code :

Ce que vous essayez de faire, c'est d'attacher une click gestionnaire d'événement sur .result dans le gestionnaire d'événement d'un autre événement ( blur ).

Votre code ne fera rien, sauf attacher ceci click qui, en fait, ne fait rien.

---

Une option simple :

Le site blur sera déclenché en premier, et l'événement click sur .results deuxième, donc ce n'est pas une situation facile.

La façon la plus simple de procéder est la suivante :

$('input#auto_results').blur(function () {
    $('#results_container').hide();
});

$('.result').click(function () {
    $('#results_container').show();
});

Démonstration de jsFiddle

Donc, il suffit de cacher le conteneur, et au clic, de le montrer à nouveau. Le résultat est un petit clignotement.

---

Option de délai d'attente :

Une autre option à laquelle je pense est de définir un petit délai d'attente lorsque la fonction blur est déclenché, et sur l'événement de clic de .results pour l'annuler. Dans cet exemple, je stocke le délai sur body avec le .data() vous pourriez le stocker sur un élément plus logique, ceci est juste une démonstration :

$('input#auto_results').blur(function () {
    var cucc=setTimeout(function () {
        $('#results_container').hide();
        $('body').removeData('blurTimeout');
    }, 100);
    $('body').data('blurTimeout', cucc);
});

$('.result').click(function () {
    var cucc=$('body').data('blurTimeout');
    if (typeof cucc != 'undefined') {
        clearTimeout(cucc);
    }
});

Démonstration de jsFiddle