4

改訂された質問（オリジナルについては以下を参照）：

ロードされたコンテンツ内の要素にイベントバインディングを使用した単純なajaxロードの例を次に示します。

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がコンテンツをロードしました。soTest2.htm：

<div id="theElem" >
    Hello
</div>

では、なぜこれが機能しないのですか？

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

しかし、これはします：

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

++++++++++元の質問：++++++++++

特定のテーブル見出しがクリックされたときにソートしたいテーブルがあります（クラスが「sort」のテーブル）。
例えば：

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

それを行うために私はこのコードを持っています：

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

    });
});

したがって、これらの並べ替え可能な列見出しの1つのクリックイベントで、この関数に渡すために「this」スコープ全体を変数に格納しています。

質問を単純化するために、私が使用しているカスタム属性'方向'に基づいて、クリックされた要素の背景色を変更しようとしているとだけ言います。

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

    }



}

私はjavascriptスコープのいくつかの側面を理解していないと思います（「これ」を理解することは私には非常にとらえどころのないものでした）。

要約された質問：

var'd'this'スコープを関数に渡す場合、'this'要素のアスペクトを変更できないのはなぜですか？長い道のりを使用してドリルダウンする必要があるのはなぜですか？

私が明確にするためのトリッキーな質問、うまくいけば私は十分な仕事をしました。

ありがとう！

4

2 に答える 2

1

これは、ajax呼び出しがDOM要素を置き換えるために発生しています。.loadobjは、呼び出す前にDOMにあったが、置き換えられたDOM要素を参照します。ただし、同じIDを持つ別の要素が存在します。これは、「ロングハンド」メソッドで参照しているものです。

于 2011-05-11T22:15:53.490 に答える
0

あなたの問題は、そのロード呼び出しが非同期であり、jQueryが混乱するためだと思います。のコールバック内にコードを配置するloadと、機能するはずです。

jQuery(document).ready(function() {
    jQuery('.loadedContent').load('soTest2.htm',
    function(resp, status, xhr){
        jQuery("#theElem").bind('click',
        function(){
            changeBG(this);
        });
    });
});
于 2011-05-11T21:56:46.517 に答える