Question

How to make a jquery function work for elements added after its first run which does not apply to dynamically added elements.

Code:

jQuery(function() {
   jQuery.support.placeholder = false;
   test = document.createElement('input');
   if('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
   var active = document.activeElement;
   if(!$.support.placeholder) { 
      $(':text').focus(function () {
         if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('');
            if($(this).hasClass("dcphc")===true){$(this).removeClass('dcph');}
            else if($(this).hasClass("dcphmgc")===true){$(this).removeClass('dcphmg');}
            else if($(this).hasClass("dcphlgc")===true){$(this).removeClass('dcphlg');}
         }
      }).blur(function () {
         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder'));
            if($(this).hasClass("dcphc")===true){$(this).addClass('dcph');}
            else if($(this).hasClass("dcphmgc")===true){$(this).addClass('dcphmg');}
            else if($(this).hasClass("dcphlgc")===true){$(this).addClass('dcphlg');}
         }
      });
      }
      else{
        $(':text').blur(function () {
         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val("");
         }
      }); 
      }
      $(':text').blur();
      $(active).focus();
});

function ref_dcph(w){
      var active = document.activeElement;
      if(!$.support.placeholder) { 
      $(w).focus(function () {
         if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('');
            if($(this).hasClass("dcphc")===true){$(this).removeClass('dcph');}
            else if($(this).hasClass("dcphmgc")===true){$(this).removeClass('dcphmg');}
            else if($(this).hasClass("dcphlgc")===true){$(this).removeClass('dcphlg');}
         }
      }).blur(function () {
         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder'));
            if($(this).hasClass("dcphc")===true){$(this).addClass('dcph');}
            else if($(this).hasClass("dcphmgc")===true){$(this).addClass('dcphmg');}
            else if($(this).hasClass("dcphlgc")===true){$(this).addClass('dcphlg');}
         }
      });
      }
      else{
        $(w).blur(function () {
         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val("");
         }
      }); 
      }
      $(w).blur();
      $(active).focus();
}

First function does the work, the second one ref_dcph (reference dom control place holder)
is a copy of the first one but I use it every time I add new elements that have a particular identifier other than being input or textarea so that I don’t have to go through unbind on items to which the function is already attached.

I would need a twist on the first one for it to be run also on new dynamycally elements, I don’t understand how to use “on”.

—
Also, what would happen to elements that get removed from the dom and added again (with the same id – being the same element also) – I noticed with the click handler if you want to do a $(elem).click(function(){}); you have to go through unbind – else the click is doubled.

I wonder how to make the first twist and also check if a previous focus() or blur() was attached to the same element that is being detected as dynamically generated and if it is the case then don’t attach again focus() and blur(). Cause I have elements on the page that get removed from the dom and then are added again which involve an input or a textarea with a placeholder.

Answer 1

          $("body").on("blur", ":text", function(event){});