JQuery: добавление к элементу, созданному в другой функции - PullRequest
Новая
       8

JQuery: добавление к элементу, созданному в другой функции

0 голосов
/ 04 февраля 2010

Я создал div примерно так: 

 $(document).ready(function() {
        $(document.createElement("div")).attr("id", "container").appendTo("body");
    });

, а потом, динамически, я хочу добавить к нему некоторые вещи, поэтому в другой функции я вызываю 

$(newElement).appendTo("#container");

но это ничего не делает. Div все еще там, но он пуст. Если я изменю код на 

$(newElement).appendTo("body");

работает нормально. Есть идеи, что я делаю не так?

Вот полный пример моего кода: 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(document.createElement("div")).attr("id", "container").appendTo("body");
            });

            function add() {
                var newElement = $(document.createElement("div")).attr("id", "inner");
                $(newElement).appendTo("#container");
            }
        </script>
        <style type="text/css">
            #inner{
                background-color: black;
                height: 200px;
                width:100px;
            }
        </style>
    </head>
    <body>       
        <script language="JavaScript" type="TEXT/JAVASCRIPT">
            add();
        </script>
    </body>
</html>

1 Ответ

2 голосов
/ 04 февраля 2010

Ваша функция add () вызывается перед $ (document) .ready ();

Измените это на это, и оно должно работать: 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(document.createElement("div")).attr("id", "container").appendTo("body");
                add();
            });

            function add() {
                var newElement = $(document.createElement("div")).attr("id", "inner");
                $(newElement).appendTo("#container");
            }
        </script>
        <style type="text/css">
            #inner{
                background-color: black;
                height: 200px;
                width:100px;
            }
        </style>
    </head>
    <body>       
    </body>
</html>

Что может быть сжато до: 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript">
            $(function() {
                $("<div/>", { id : "container" }).appendTo("body");
                $("<div/>", { id : "inner"}).appendTo("#container");
            });
        </script>
        <style type="text/css">
            #inner{
                background-color: black;
                height: 200px;
                width:100px;
            }
        </style>
    </head>
    <body>       
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...