Set css with jquery after ajax

Question

I have a map (intanceOf Google Maps) and dinamically i'm appending html to it. It's a pim more specifically a richMarker. Everything goes right, the mark is there.

The problem is, i'm trying to set a class to a tag of this html rendered by richMarker and in the page i'm trying to catch this tag with JQuery selector, and of course do stuff with it.

some code:

the main page have this.

$.cometd.subscribe(channelCerca, function (comet) {

        if (comet.data.type== 0) //Enum ETipoCerca
            sigo.notifyError("viature: " + comet.data.viatura + " out");
        else if (comet.data.type== 1)
            sigo.notifyError("viature: " + comet.data.viatura + " out");

        color = comet.data.cercaColor;
        cerca = doDraw(comet.data, color);

        cadg.rastreador.cerca = true;
        cadg.rastreador.LoadRastreator(force, color );

        $('.blink').each(function () {
            var elem = $(this);
            setInterval(function () {
                if (elem.css('visibility') == 'hidden') {
                    elem.css('visibility', 'visible');
                } else {
                    elem.css('visibility', 'hidden');
                }
            }, 500);
        });

        //$(window).load(doBlink());
        //doBlink();
    });

loadRastreador do a lot of stuffs. In general: 1 - An ajax post 2 - Preparing the marker 3 - Append the marker to the map

on preparing the new marker i do:

//CERCA
    if (cerca) {
        desc = "<span class='blink' color: " + cor + "' >&nbsp;" + this.des + "</span>";
    }

i want to catch this span with blink class and make it blink with jquery.

$('.blink').each(function () {
            var elem = $(this);
            setInterval(function () {
                if (elem.css('visibility') == 'hidden') {
                    elem.css('visibility', 'visible');
                } else {
                    elem.css('visibility', 'hidden');
                }
            }, 500);
        });

the application is a little complex.. but my problem is simple. by some reason jquery can't see this new element.

I already have tried: 1 - put this jquery instruction inside done method method of ajax. 2 - using $(window).load() 3 - using text-decorarion: blink <- it work on firefox but you know.. it's not recomended and chrome ignore it at all.

NOTE: if I catch this jquery instruction and execute it with chrome console or firefug the element start to blink as i want it to do.

Diodeus - James MacFarlane · Accepted Answer · 2012-10-15 20:45:09Z

2

Use CSS:

.hidden {
    visibility:hidden;
}

jQuery class selectors ALREADY select all of the elements as a group. No need to loop.

JS:

setInterval(function () {  
    $('.blink').toggleClass('hidden');
}, 500);

answered Oct 15, 2012 at 20:45

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

Collectives™ on Stack Overflow

Set css with jquery after ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related