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

jquery css ajax element loaded
qwerty picture qwerty · Jul 28, 2011 · Viewed 27.9k times · Source

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

Adam Hopkinson picture Adam Hopkinson · Jul 28, 2011

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.

Related questions

Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More
How to generate a simple popup using jQuery

I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?

Read More
Set timeout for ajax (jQuery)

$.ajax({ url: "test.html", error: function(){ //do something }, success: function(){ //do something } }); Sometimes success function works good, sometimes not. How do I set timeout for this ajax request? In example, 3 seconds, if time is out, then show an error. The …

Read More