Javascript scope question: Can't change element via 'this' obj passed to function, but I can using longhand approach

StackOverflow https://stackoverflow.com/questions/5967638

Frage

REVISED QUESTION (SEE BELOW FOR ORIGINAL):

Here is an example of a simple ajax load with an event binding on an element within the 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 is it that this doesn't work:

jQuery(obj).css('background-color','red');

But this does:

jQuery('#' + jQuery(obj).attr('id')).css('background-color','red');

++++++++++ORIGINAL QUESTION:++++++++++

I have a table that I want to sort when specific table headings are clicked (those with the class "sort").
For instance:

<a href="##" class="sort" sortby="LOCATION" direction="asc">Location</a>

To do that I have this 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 the click event for one of these sortable column headings I'm storing the entire 'this' scope in a var to pass through to this function.

To simplify the question I'll just say that we're trying to change the background color of the clicked element based on the 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 -- almost like it's cached or something
    alert('Long hand reference: ' + jQuery('.sort[sortby="' + jQuery(obj).attr('sortby') + '"]').attr('direction'));

    //Must reference value via (obj) to get correct updated value
    if (jQuery(obj).attr('direction') == 'asc') {

        //Changing a value within the element via this longhand approach works
        jQuery('.sort[sortby="' + jQuery(obj).attr('sortby') + '"]').css('background-color', 'red');


        //Changing a value within the element via this shorter approach does 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 some aspect of javascript scoping (understanding 'this' has been very elusive to me).

Question summarized:

If I'm passing a var'd 'this' scope to a function why can't I change the aspects of the 'this' element, why must I drill down using the long way to change them?

A tricky question for me to articulate, hopefully I did a good enough job.

Thanks!

Keine korrekte Lösung

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top