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/

Answer 1

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.