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

Question

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!

Answer 1

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.

Answer 2

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

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

Answer 3

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');
    }
});