Ru-MaNGOS

Ru-MaNGOS (http://mangos.ytdb.ru/index.php)
-   Новичкам (http://mangos.ytdb.ru/forumdisplay.php?f=40)
-   -   Jquery, ajax and Drag and Drop (http://mangos.ytdb.ru/showthread.php?t=8305)

lovepsone 18.10.2014 14:16

Jquery, ajax and Drag and Drop
 
Добрый день. Начала по тиху осваивать jquery и наткнулся на одну не удобность:после выполнения ajax,на новых сгенерированных данных не получается запустить Drag and Drop. То есть, до добавлении новых данных все работает прекрасно, кнопочки двигаются норм, но если с помощью аякса добавить еще одну кнопочку, то ее двигать уже нельзя. Селекторы вроде все прописаны в новой кнопочке, но она не реагирует. Не могу понять в чем проблема.
Кто сталкивался подскажите плз.

Вот ajax запрос
Код:

$(document).ready(function()
{
        $("#TF1, #TF2, #TF3, #TF4, #TF5").click(function()
        {
                var att = $(this).attr('id');
                var TypeF = 1;
                switch (att)
                {
                case "TF1": TypeF = 1; break;
                case "TF2": TypeF = 2; break;
                case "TF3": TypeF = 3; break;
                case "TF4": TypeF = 4; break;
                case "TF5": TypeF = 5; break;
                }
                $.ajax(
                {
                        url: 'include/HandleItems.php', // Путь к обработчику
                        type: 'POST', // метод передачи данных

                        data:{'TypeFraction': TypeF},
                        success: function(data)
                        {
                                $("#ItemOutput").html(data);
                        }
                });
          })

});

в зависимости какая была нажата кнопочка, обработчикам создается новая кнопочка со своим сообщением.

Вот код Drag and Drop
Код:

$(function () {
        $("#items").draggable({
                helper:'clone'
        });

})


На 3 часа позже...
Получилось решить данный вопрос, оказывается после выполнения аякс запросы, изначально инициализированный скрипт попросту не срабатывал, для этого его нужно было просто еще раз инициализировать:

Код:

$(document).ready(function()
{
        $("#TF1, #TF2, #TF3, #TF4, #TF5").click(function()
        {
                var att = $(this).attr('id');
                var TypeF = 1;
                switch (att)
                {
                case "TF1": TypeF = 1; break;
                case "TF2": TypeF = 2; break;
                case "TF3": TypeF = 3; break;
                case "TF4": TypeF = 4; break;
                case "TF5": TypeF = 5; break;
                }
                $.ajax(
                {
                        url: 'include/HandleItems.php', // Путь к обработчику
                        type: 'POST', // метод передачи данных

                        data:{'TypeFraction': TypeF},
                        success: function(data)
                        {
                                $("#ItemOutput").html(data);
                                $(function () {
                                            $("#items").draggable({
                                            helper:'clone'
                              });

});
                        }
                });
          })

});
$(function () {
        $("#items").draggable({
                helper:'clone'
        });

});


SergiK_KilleR 18.10.2014 17:36

для динамически сгенерированных селекторов обработчик selector.click(function(){}) не подходит, используйте вместо него обработчик selector.live('click',function(){})

lovepsone 18.10.2014 23:39

сделал вот так:
Код:

$("div #items").live("click", $(function ()
{
        $(this).draggable(
        {
                helper:'clone'
        });
}));

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

SergiK_KilleR 19.10.2014 11:37

примерно так это выглядит

http://jsfiddle.net/v1axL6dc/71/

lovepsone 19.10.2014 13:04

спс, сейчас разберемся.


Текущее время: 07:37. Часовой пояс GMT +3.

ru-mangos.ru - Русское сообщество MaNGOS