Вопрос о Javascript: невозможно изменить элемент с помощью объекта this, переданного в функцию, но я могу использовать произвольный подход - PullRequest
Новая
       26

Вопрос о Javascript: невозможно изменить элемент с помощью объекта this, переданного в функцию, но я могу использовать произвольный подход

4 голосов
/ 11 мая 2011

ПЕРЕСМОТРЕННЫЙ ВОПРОС (СМ. НИЖЕ ДЛЯ ОРИГИНАЛА):

Вот пример простой загрузки 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);

    });
});

Итак, по кликуСобытие для одного из этих сортируемых заголовков столбцов. Я сохраняю всю область «this» в переменной, чтобы перейти к этой функции.

Чтобы упростить вопрос, я просто скажу, что мы пытаемся изменить цвет фона элемента, по которому щелкнули, в соответствии с пользовательским attr 'direction', которое я использую: 

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, почему я должен сверлитьиспользовать длинный путь, чтобы изменить их?

Сложный вопрос для меня, чтобы сформулировать, надеюсь, я проделал достаточно хорошую работу.

Спасибо!

Ответы [ 2 ]

1 голос
/ 12 мая 2011

Это происходит потому, что ваш ajax-вызов заменяет элемент DOM.obj ссылается на элемент DOM, который был в DOM до того, как вы вызвали .load, но был заменен.Однако существует еще один элемент с таким же идентификатором!Это тот, на который вы ссылаетесь, используя свой метод «от руки».

0 голосов
/ 12 мая 2011

Я думаю, что ваша проблема в том, что вызов load является асинхронным, что приводит к путанице в jQuery.Поместите свой код в обратный вызов для load, и он должен работать: 

jQuery(document).ready(function() {
    jQuery('.loadedContent').load('soTest2.htm',
    function(resp, status, xhr){
        jQuery("#theElem").bind('click',
        function(){
            changeBG(this);
        });
    });
});
...