jQuery not recognizing appended HTML

Question

Quite new to jQuery so exercise patience with me :)

I think this should be a quick one: On clicking .color, I've appended some basic HTML to a page with the class .selected. When I hover on any div.color with the html (.selected) appended inside of it, I want to add some CSS to .selected to give it a hover on state, by using

$('.color').toggle( 
    function(){
        $('.color').empty('span'),
        $(this).append("<span class='selected'></span>")
    },
    function() {
        $('.color').empty('span');
    })

$('.color').click( function(){
    $('.color').toggle;
})

$('.color').has('.selected').hover(
        function(){
            $(".color span").css('background-position', '0px -24px');
        },
        function() {
            $(".color span").css('background-position', '0px 0px');
        })

The problem is that jQuery isn't recognizing that the appended html exists. I've manually inserted the HTML and it works perfectly, but through .append it doesn't cooperate.

Thanks

EDIT: Demo here: http://judsoncollier.com/DEMO/

It looks to me like the span you're appending has no size and thus couldn't show a background image. — jfriend00
– jfriend00, Commented Dec 14, 2011 at 5:59
Care to describe what the demo is supposed to do? Is there any reason you aren't just using the :hover pseudo class in your CSS rather than using javascript? And for your javascript, is there any reason why you're adding a span rather than just adding a class to the existing object? — jfriend00
– jfriend00, Commented Dec 14, 2011 at 6:05

XepterX · Accepted Answer · 2011-12-14 06:19:45Z

1

since you have appended the class="selected", you can manipulate the class behavior by adding this class in your css file for hover.

.selected:hover{
//your css
}

you won't need jquery to do this and it would save you a lot of time.

answered Dec 14, 2011 at 6:19

XepterX

1,0116 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kvc · Accepted Answer · 2011-12-14 06:57:48Z

0

You can use jquery live event inorder to attach events to the modified html content(that were injected into dom after the jquery ready function was fired).I have modified taken ur code and made it work.Please check this link http://jsfiddle.net/zySNn/ Hope it helps.

edited Dec 14, 2011 at 6:57

answered Dec 14, 2011 at 6:25

kvc

1,1372 gold badges7 silver badges21 bronze badges

1 Comment

nnnnnn Over a year ago

"You have to use jquery live" - You don't have to, in fact live() is deprecated from version 1.7+, in favour of .on(). Even for pre 1.7 you should be using .delegate() in preference to .live().

Pavan · Accepted Answer · 2011-12-14 06:09:39Z

0

Try adding event handlers using live() method. http://api.jquery.com/live/

answered Dec 14, 2011 at 6:09

Pavan

4,3391 gold badge24 silver badges25 bronze badges

1 Comment

Purag Over a year ago

live() is deprecated as of jQuery 1.7.

Matt Cashatt · Accepted Answer · 2011-12-14 06:10:53Z

0

I have had trouble with using jQuery .on() in the past (plus only for jQuery version 1.7 I think). Try using jQuery's .live() method on your ".selected" selector like this:

    $('.selected').live("mouseenter",function(){

//do stuff });

    $('.selected').live("mouseleave",function(){

//do stuff });

answered Dec 14, 2011 at 6:10

Matt Cashatt

24.3k29 gold badges83 silver badges114 bronze badges

2 Comments

Purag Over a year ago

live() is deprecated as of jQuery 1.7 in favor of on().

Matt Cashatt Over a year ago

@Purmou: I think that we are all aware of that. Please read the post in it's entirety.

nnnnnn · Accepted Answer · 2011-12-14 06:25:13Z

When you call the .click() or .hover() methods (or .keyup(), etc.), jQuery assigns a handler to any elements that match the selector ('.color' in your case) at that moment. It doesn't apply to any elements added in the future or to existing elements that don't currently match but which are later modified. Neither does it automatically remove the click handler from elements changed to no longer match that selector.

Fortunately there are three ways to assign a handler such that it will work for elements added in the future: .on(), .delegate(), and .live() - if you are using jQuery 1.7+ you should use .on(), otherwise use .delegate() because .live() is deprecated (and I mention it only for completeness). In general terms the way all three work is they assign a handler to a container element and then when the event occurs they check to see if the target element matches the selector you originally specified. This means that all three will let you define your handler once and have it automatically apply to elements added in the future. (Again for completeness I should mention that .on() does more than this depending on the parameters you pass it - for full info read the doco page.)

So anyway, to fix your code try this:

// if your elements have an appropriate container, then specify it
// like so:
$('#yourcontainer').on('hover', '.color .selected', function(){
      $(".color span").css('background-position', '0px -24px');
},
function() {
      $(".color span").css('background-position', '0px 0px');
});

// OR, if you don't have a container and don't want to add one
// just specify document:
$(document).on('hover', '.color .selected', function(){
   // etc

Though having said that I'm not sure if you can assign "hover" with .on(), .delegate() or .live(): you might have to assign "mouseenter" and "mouseleave" instead.

EDIT: Regarding what you're doing appending an empty span: you seem to be trying to use this like a flag on your element. A much better way to do that is to simply add and remove another class to your element using .addClass() and .removeClass().

Collectives™ on Stack Overflow

jQuery not recognizing appended HTML

5 Answers 5

Comments

1 Comment

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

2 Comments

Comments

Related