Добрый день. Начала по тиху осваивать 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'
});
});