Доступ к объектам jQuery в шаблоне модуля - PullRequest
Новая
       3

Доступ к объектам jQuery в шаблоне модуля

0 голосов
/ 17 января 2011

Действительно попадаю в javascript и оглядываюсь на некоторые паттерны. Одна из них, с которой я столкнулся, - это шаблон модуля. Кажется, это хороший способ думать о функциональности, поэтому я попытался реализовать ее с помощью jQuery. Я столкнулся с загадкой, хотя. Рассмотрим следующий код 

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>index</title>        
        <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){

                var TestClass2 = (function(){
                    var someDiv;            
                    return {
                        thisTest: function ()
                        {
                               someDiv = document.createElement("div");
                                   $(someDiv).append("#index");
                                   $(someDiv).html("hello");
                                   $(someDiv).addClass("test_class");
                        }
                    }
                })();

                TestClass2.thisTest();          

            });
        </script>

    </head>

    <body id="index" onload="">

        <div id="name">
            this is content
        </div>

    </body>
</html>

Приведенный выше код предупреждает HTML-содержимое div, а затем добавляет класс. Оба они используют методы jQuery. Проблема в том, что метод .html () работает нормально, но я не могу добавить класс. Нет ошибок, и класс не добавляется. Что здесь происходит? Почему класс не добавляется в div?

Ответы [ 3 ]

2 голосов
/ 17 января 2011

Ах, теперь, когда вы обновили свой вопрос, я могу лучше ответить на ваш вопрос.Вы должны изменить append на appendTo, учитывая, что вы хотите переместить созданный элемент в уже существующий #index.

$(document).ready(function() {

var TestClass2 = (function() {
    var someDiv = $("#name");
    return {
        thisTest: function() {
            someDiv = document.createElement("div");
            $(someDiv)
                .html("hello")
                .addClass("test_class")
                .appendTo("#index");
        }
    }
})();

TestClass2.thisTest();

});

Надеюсь, это поможет!

0 голосов
/ 17 января 2011

Ваш код работает отлично!http://jsfiddle.net/lmcculley/p3fDX/

0 голосов
/ 17 января 2011

Я скопировал и вставил ваш код, и он работает для меня.

Убедитесь, что вы не просто просматриваете источник, чтобы увидеть, применяется ли класс, потому что при этом просто отображается HTML-код, отправленный с сервера - любые обновления DOM, которые происходят через JavaScript, не будут отражены.

Для просмотра живого DOM используйте такой инструмент, как Firebug или Инспектор WebKit (встроен в Safari и Chrome).

...