CODEWITHSUNDEEP
jquerycssajaxelementloaded
qwerty
qwerty

Reputation: 393

jQuery: Changing the CSS on an element loaded with ajax?

I need to change the position of an element i'm loading with ajax. I want to use .css() to change it but jQuery can't find the element cause it's not being recognized. How do i do to make jQuery "recognize" the element?

I've read about live() and delegate() but i can't get neither one of them to work as i want them to. I'd really appreciate some help!

Upvotes: 8

Views: 32083

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

If you have to markup in a js variable then you can do it as below.

$(markup).find("requiredElement").css({ set the properties here });

Upvotes: 2

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

Make the css change in the complete or success function of the ajax call. Assuming you're using load:

$('#el').load(
    url,
    data,
    function(){
        $('#selector').css('position', 'absolute');
    }
);

Alternatively (and easier to give as an example) register an ajaxComplete event

$(document).ajaxComplete(function(){
    if($('#elementID').length != 0) {
        $('#elementID').css('position', 'absolute');
    }
});

This is fired each time an ajax request completes, checks to see if #elementID exists and if so applies the css.

Upvotes: 20

SeanCannon
SeanCannon

Reputation: 77986

If you want to edit it's CSS, you need to place it in the DOM first, then manipulate it.

Example:

$.ajax({
    ...
    success:function(data){
        $('<div/>').appendTo('body').html(data).css('border','3px solid red');
    }
});

Upvotes: 0

Related Questions