Jquery - добавление динамически добавленного элемента управления из getJSON

Question

У меня проблема с назначением элемента управления динамически добавляемым элементам (внутри функции JSON).

Код работает нормально, но когда я добавляю $ ('div.prnt'). Append ("hello"); тогда внутри JSON он не присваивает $ ("div.text"). draggable (); к этому. Когда я убираю функцию JSON и использую только $ ('div.prnt'). Append ("hello"); это работает сразу.

Я полагаю, что функция JSON предотвращает добавление элементов до вызова перетаскиваемого элемента управления.

<style>
    div.prnt div.test
    {
        border: 1px solid #000;
        width: 200px;
        height: 200px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function ()
    {
        var serviceurl = "WebServices/BusinessCardStudio.svc/gettextobjects/3457/17/17/1064/709/600/399";

        $.getJSON
        (
            serviceurl,
            function (data)
            {
                $.each(data, function (i, item)
                {
                    $('div.prnt').append("<div class='object text'>hello</div>");
                });
            }
        );

        $("div.text").draggable();
    });
</script>
<div class="prnt">
</div>

Кто-нибудь знает способ обойти это?

Заранее спасибо

Answer 1

AJAX - это асинхронный .

Вызов getJSON() немедленно прекратится, и ваш draggable() вызов будет выполнен до того, как сервер ответит.

Вам необходимопереместите вызов draggable() в обратный вызов.
Вот почему обратный вызов существует в первую очередь.

Answer 2

сделайте это в случае успеха ajax, чтобы обеспечить его выполнение после завершения ajax

$.getJSON
            (
                serviceurl,
                function (data)
                {
                    $.each(data, function (i, item)
                    {
                        $('div.prnt').append("<div class='object text'>hello</div>");
                    });
               $("div.text").draggable(); 
               }
            );


        });

Answer 3

$("div.text").draggable(); вызывается сразу после запуска вашего запроса JSON.Затем позже сервер отвечает JSON и выполняет переданную ему функцию.Итак, вы делаете что-то перетаскиваемое, которого еще не существует.

Поместите перетаскиваемый вызов в функцию обратного вызова, и вы должны быть хорошими.