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!
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.
$(document).ajaxSuccess(function() { ... }); which listens to all ajax transfers. Similar as stated above with $(document).ajaxComplete(function(){});If you have to markup in a js variable then you can do it as below.
$(markup).find("requiredElement").css({ set the properties here });
.load, which seems the easiest way of putting an element into a page using ajax. I don't know if you can intercept the element in a load call.
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');
}
});
