Question

I am trying to make a placeholder to work on IE. The issue is that my page loads some elements via Ajax, but Javascript is loaded only once. Therefore the Ajax loaded input fields do not have placeholders (because those elements were not loaded when the Javascript executed).

I was trying to make it so that the script is bind to all input text elements with placeholder and not just to currently loaded, but I am not sure what am I doing wrong.

if(!$.support.placeholder) {

    $('[placeholder]').on('focus', function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).on('blur', function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();

}

Answer 1

Try this

if(!$.support.placeholder) {

    $('#closestStaticParent').on('focus', '[placeholder]' function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).on('blur', '[placeholder]' function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();

}