variables - Javascript scope question: Can't change element via 'this' obj passed to function, but I can using longhand approach -
revised question (see below original):
here example of simple ajax load event binding on element within loaded content:
sotest.htm
<!doctype html> <html> <head> <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script> function changebg(obj) { alert('color 1: should turn red'); jquery(obj).css('background-color','red'); alert('color 2: should turn green'); jquery('#' + jquery(obj).attr('id')).css('background-color','green'); } jquery(document).ready( function() { jquery('.loadedcontent').load('sotest2.htm'); jquery('body').delegate("#theelem","click", function(){ var obj = this; jquery('.loadedcontent').load('sotest2.htm', function(){ changebg(obj); } ); }); } ); </script> </head> <body> <div class="loadedcontent"> </div> </body> </html> ajax loaded content, sotest2.htm:
<div id="theelem" > hello </div> so why doesn't work:
jquery(obj).css('background-color','red'); but does:
jquery('#' + jquery(obj).attr('id')).css('background-color','red'); ++++++++++original question:++++++++++
i have table want sort when specific table headings clicked (those class "sort").
instance:
<a href="##" class="sort" sortby="location" direction="asc">location</a> to have code:
jquery('body').delegate("click", ".sort", function(event) { event.preventdefault(); jquery('.searchresults').html('<div align="center" style="margin-top:35px;"><img src="/common/images/ajax-loader_big.gif" /></div>'); var timestamp = new date().gettime(); var sortitem = this; jquery('.searchresults').load('modules/configsearchresultsoutput.cfm?' + timestamp + '&sortby=' + jquery(this).attr('sortby') + '&direction=' + jquery(this).attr('direction'), { data: jquery('#results').val() }, function() { sortcallback(sortitem); }); }); so on click event 1 of these sortable column headings i'm storing entire 'this' scope in var pass through function.
to simplify question i'll we're trying change background color of clicked element based on custom attr 'direction' i'm using:
function sortcallback(obj) { //returns correct attribute value alert('in callback: ' + jquery(obj).attr('direction')); //does not return correct attribute value -- it's cached or alert('long hand reference: ' + jquery('.sort[sortby="' + jquery(obj).attr('sortby') + '"]').attr('direction')); //must reference value via (obj) correct updated value if (jquery(obj).attr('direction') == 'asc') { //changing value within element via longhand approach works jquery('.sort[sortby="' + jquery(obj).attr('sortby') + '"]').css('background-color', 'red'); //changing value within element via shorter approach not work jquery(obj).css('background-color', 'red'); } else { //works jquery('.sort[sortby="' + jquery(obj).attr('sortby') + '"]').css('background-color', 'green'); //doesn't work jquery(obj).css('background-color', 'green'); } } i'm assuming i'm not understanding aspect of javascript scoping (understanding 'this' has been elusive me).
question summarized:
if i'm passing var'd 'this' scope function why can't change aspects of 'this' element, why must drill down using long way change them?
a tricky question me articulate, did enough job.
thanks!
this happening because ajax call replaces dom element. obj refers dom element in dom before called .load, replaced. element same id exist, though! that's 1 you're referring 'longhand' method.
Comments
Post a Comment