AJAX लोड सामग्री के लिए jquery bind focus/blur events

Question

मेरे पास यह स्क्रिप्ट है जो टेक्स्ट इनपुट और टेक्स्टरेज़ पर धुंध/फोकस पर कक्षा को जोड़ने/निकालने के लिए ठीक काम करती है - हालांकि मुझे पृष्ठ के बाद जोड़े गए सामग्री पर भी काम करने की आवश्यकता है AJAX के माध्यम से लोड:

$(function() { 
    $('input[type=text], textarea').addClass("idleField"); // reset all ## 
    $('input[type=text], textarea').bind("focus", function(event){ 
     $(this).removeClass("idleField").addClass("focusField"); 
     if (this.value == this.defaultValue){ 
     this.value = ''; 
    } 
    if(this.value != this.defaultValue){ 
     this.select(); 
     } 
    }).bind("blur", function(event){ 
    $(this).removeClass("focusField").addClass("idleField"); 
     if ($.trim(this.value) == ''){ 
     this.value = (this.defaultValue ? this.defaultValue : ''); 
    } 
    }); 

}); 

यह घटनाओं को नई सामग्री के लिए बाध्यकारी नहीं है - कोई विचार?

Answer 1

इसके बजाय .bind का उपयोग करने का

, .on() का उपयोग करें:

$(document).on('focus', 'input[type=text], textarea', function() { 
    // stuff here will be applied to present and *future* elements 
}); 

Answer 2

.bind() विधि तत्वों है कि वर्तमान में मौजूद है। वर्तमान में DOM और में मौजूद तत्वों के लिए ईवेंट हैंडलर संलग्न करने के लिए मौजूद भविष्य के तत्व जो आपको मौजूद हो सकते हैं, आपको .live() विधि का उपयोग करना चाहिए। आप .delegate() विधि का भी उपयोग कर सकते हैं यदि आप नहीं चाहते हैं कि आपकी घटनाएं डोम के शीर्ष पर सभी तरह से बबल करें।

इसके अतिरिक्त, आप एक फ़ंक्शन कॉल में अपने तत्वों पर कक्षाओं को स्विच करने के लिए .toggleClass() विधि का उपयोग कर सकते हैं। इस प्रकार, आपका कोड होगा:

$(function() { 
    $('input[type=text], textarea').addClass("idleField"); // reset all ## 
    $('input[type=text], textarea').live("focus", function(event){ 
     $(this).toggleClass("focusField idleField"); 
     if (this.value == this.defaultValue) { 
      this.value = ''; 
     } 
     if (this.value != this.defaultValue) { 
      this.select(); 
     } 
    }).live("blur", function(event){ 
     $(this).toggleClass("focusField idleField"); 
      if ($.trim(this.value) == ''){ 
      this.value = (this.defaultValue ? this.defaultValue : ''); 
     } 
    }); 
});