2010-08-19 4 views
6

Version jQuery 1.4.1jQuery focusIn et focusOut événements en direct ne se déclenchent pas

Je cherche à écrire un simple plugin de type filigrane et je veux profiter des événements en direct car tous les éléments que je besoin de l'utiliser sur existeront pendant le chargement de la page, ou ils peuvent être ajoutés et supprimés du DOM. Cependant, pour une raison quelconque, les événements ne se déclenchent jamais.

Voici le code qui ne travaillent pas:

; (function($) { 

    $.fn.watermark = function(text) { 

     return $(this).each(function() { 
      $(this).live('focusout', function() { 
       if (this.value == "") { 
        this.value = text; 
       } 

       return false; 
      }); 

      $(this).live('focusin', function() { 
       if (this.value == text) { 
        this.value = ""; 
       } 

       return false; 
      }); 
     }); 
    } 

})(jQuery); 

je peux obtenir ce travail sans utiliser des événements en direct. Ce code fonctionne:

; (function($) { 

    $.fn.watermark = function(text) { 

     return $(this).each(function() { 
      $(this).focusout(function() { 
       if (this.value == "") { 
        this.value = text; 
       } 

       return false; 
      }); 

      $(this).focusin(function() { 
       if (this.value == text) { 
        this.value = ""; 
       } 

       return false; 
      }); 
     }); 
    } 

})(jQuery); 

Répondre

6

.live() a besoin d'un sélecteur pas un élément DOM, dans le lieu que vous appelez, il est seulement sur un élément DOM, donc au lieu de ceci:

$(this).each(function() { 
     $(this).live('focusout', function() { 

Essayez ce (this est déjà un objet jQuery):

this.live('focusout', function() { 

Il a besoin de ce à cause de la façon dont fonctionne .live(), lorsqu'un événement bouillonne à document il vérifie ce sélecteur ... s'il n'y a pas de sélecteur, il n'y a aucun moyen de le vérifier. Aussi, si vous avez un élément DOM et que le gestionnaire d'événements est pour seulement il, n'aurait pas beaucoup de sens de toute façon :)

+0

'$ (ce) .each' devrait être remplacé par' this.each' pour les mêmes raisons. – jAndy

+1

@jAndy - En fait, il n'a pas besoin du '.each()' du tout, juste des sélecteurs en chaîne :) –

+0

Quelque chose ne semble pas juste ici. Je pensais que vous devriez toujours utiliser return this.each? Voir: http://stackoverflow.com/questions/2678185/why-return-this-eachfunction-in-jquery-plugins –

0
+0

Cela ne devrait pas être nécessaire puisque j'utilise la version 1.4.1. Cette question est une solution de contournement car les versions précédentes de jquery ne prenaient pas en charge l'utilisation de focusin et de focusout en tant qu'événements en direct. –

0

Essayez:

$(document).ready(function(){ 
 
    $('input[type=search]').bind('focusin', function(){ 
 
    $(this).animate({width: '300px'}, 500); 
 
    $('svg.magnifier').hide(); 
 
    $('svg.cancel').show(); 
 
    }).bind('focusout', function(){ 
 
    $('svg.cancel').hide(); 
 
    $('svg.magnifier').show(); 
 
    $(this).animate({width: '100px'}, 500); 
 
    }); 
 
});
div.box_block { 
 
    position: relative; 
 
} 
 
input[type=search] { 
 
    width: 100px; 
 
    padding: 10px 10px 10px 30px; 
 
} 
 
/* -- 
 
    SVG - https://www.iconfinder.com/iconsets/ionicons 
 
----- */ 
 
svg { 
 
    position: absolute!important; 
 
    left: 10px; 
 
    transform: translateY(55%); 
 
    top: 0; 
 
} 
 
svg.cancel { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box_block"> 
 
    <input type="search" placeholder="Search"> 
 
    <svg class="cancel" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5 c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9 c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg> 
 
    <svg class="magnifier" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3 c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2 c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2 c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg> 
 
</div>

Questions connexes