jQuery Focusin और लाइव ईवेंट सक्रिय हो रहे focusout

Question

jQuery संस्करण: 1.4.1

मैं एक साधारण वॉटरमार्क प्रकार प्लगइन लिखने के लिए प्रयास कर रहा हूँ और मैं नहीं के बाद से लाइव ईवेंट का लाभ लेने के सभी तत्वों का चाहते हैं मैं इसका उपयोग पृष्ठ लोड के दौरान मौजूद होगा, या उन्हें डीओएम से जोड़ा और हटाया जा सकता है। हालांकि, किसी कारण से घटनाएं कभी नहीं आग लगती हैं।

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

मैं इस लाइव ईवेंट का उपयोग किए बिना काम करने के लिए प्राप्त कर सकते हैं:

यहाँ काम नहीं कर कोड है।

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

Answer 1

.live(), एक चयनकर्ता नहीं किसी DOM तत्व की जरूरत है जगह आप इसे कॉल कर रहे हैं में, यह केवल DOM तत्व की है, तो बजाय इस की:: इस कोड काम करता है

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

कोशिश

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

यह एक घटनाअप करने के लिए बुलबुले जब क्योंकि कैसे .live() कार्यों के इस की जरूरत है, इस (this पहले से ही एक jQuery वस्तु है)यह चयनकर्ता को जांचता है ... यदि कोई चयनकर्ता नहीं है, तो जांचने का कोई तरीका नहीं है। इसके अलावा, यदि आपके पास DOM तत्व है और ईवेंट हैंडलर केवल है, तो .live() वैसे भी अधिक समझ नहीं पाएगा :)

Answer 2

यहां एक नज़र डालें।

Simulating "focus" and "blur" in jQuery .live() method

Answer 3

प्रयास करें:

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