2010-08-19 10 views
6

jQuery Versión: 1.4.1jQuery focusin y focusOut eventos no están disparando

Estoy intentando escribir un plugin simple tipo de marca de agua y yo quiero tomar ventaja de los eventos en vivo ya que no todos los elementos que necesidad de usarlo existirá durante la carga de la página, o pueden ser añadidos y eliminados del DOM. Sin embargo, por alguna razón, los eventos nunca se disparan.

Aquí está el código no funciona:

; (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); 

puedo conseguir que esto funcione sin necesidad de utilizar los eventos en vivo. Este código funciona:

; (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); 

Respuesta

6

.live() necesita un selector no un elemento DOM, en el lugar que está llamando él, es sólo en un elemento DOM, así que en vez de esto:

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

Try esto (this ya es un objeto jQuery):

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

se necesita esto debido a cómo .live() obras, cuando un evento se propaga hasta document comprueba ese selector ... si no hay selector, no hay forma de que lo compruebe. Además, si tiene un elemento DOM y el controlador de eventos es solo, .live() no tendría mucho sentido de todos modos :)

+0

'$ (this) .each' debe ser sustituido por' this.each' por las mismas razones. – jAndy

+1

@jAndy - En realidad él no necesita el '.each()' en absoluto, solo selectores encadenados :) –

+0

Algo no parece correcto aquí. Pensé que siempre deberías usar return this.each? Ver: http://stackoverflow.com/questions/2678185/why-return-this-eachfunction-in-jquery-plugins –

0

Probar:

$(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>

Cuestiones relacionadas