Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Need help with Jquery to set background color on focus for elements created on demand

    Hi,
    I am Jquery to set background color on focus. It is working fine for existing elements but it is not working for the elements(input, textarea, select) that I create on demand. How can I fix this?

    My Jquery code is :
    <script>
    $(document).ready(function()
    {
    $("input, textarea,select").focus(function()
    {
    $(this).addClass("activeField").removeClass("idle");
    }
    ).blur(function()
    {
    $(this).removeClass("activeField").removeClass("idle");
    });
    });
    </script>
    Thanks

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You say you're creating elements on demand - have they been created by the time your code runs?

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You say you're creating elements on demand - have they been created by the time your code runs?
    Thank u for the rely. No.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by asifakhtar View Post
    Thank u for the rely. No.
    That's why it has no effect then. You are changing classes on elements which don't exist yet.

    One approach would be to wrap your posted code into a function and call the function every time you create the new elements.

  • #5
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    You need live()

    Code:
    $("input, textarea,select").live('focus blur', function(event) {
    	if (event.type == 'focus') {
    		$(this).addClass("activeField").removeClass("idle");
    	} else {
    		$(this).removeClass("activeField").removeClass("idle");
    	}
    });

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by Spudhead View Post
    You need live()
    That's a much better approach.

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    You need live()

    Code:
    $("input, textarea,select").live('focus blur', function(event) {
    	if (event.type == 'focus') {
    		$(this).addClass("activeField").removeClass("idle");
    	} else {
    		$(this).removeClass("activeField").removeClass("idle");
    	}
    });
    Thank u very much for ur response but ur code is not doing anything.

  • #8
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    My bad. Event type should be "focusin":

    Code:
    if (event.type == 'focusin') {

  • #9
    Regular Coder
    Join Date
    Feb 2009
    Posts
    121
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    My bad. Event type should be "focusin":

    Code:
    if (event.type == 'focusin') {
    Thank u. It works.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •