Элемент Script не работает внутри JQuery .append () - PullRequest
Новая
       2

Элемент Script не работает внутри JQuery .append ()

0 голосов
/ 14 февраля 2011

Я использую этот цикл в Javascript: 

$.get('showplaylist.php', {playlist: "inbox"}, function(data){

        for (var i = 0; i < data.length + 1; i++)
        {

            var key = i;

            var id = data[key]['id'];

            var youtubeid = data[key]['youtube_id'];

            videoThumb(id, youtubeid);

        }
        }, "json");

});

Функция, которую я зацикливаю, распаковывает id и youtubeid и добавляет вывод html для каждой строки. например, 

function videoThumb(id, youtubeid)

$('#videos').append(

        "<ul id=\"sortable\">" +
            "<li id='item_" + id + "' class=\"ui-state-default\">" +
                "<div class=\"thumb\" id=\"" + id + "\">" +
                    "<img src=\"http://i3.ytimg.com/vi/" + youtubeid + "/default.jpg\">" +
                "</div>" +
            "</li>" +
        "</ul>"

        );
}

}

Проблема в «сортируемом» элементе. Я использую сортируемый плагин JQuery UI. Когда я генерирую HTML с PHP (без использования Javascript), работает сортируемый плагин. Генерирование html с помощью вышеуказанной функции означает, что это не так.

Сортируемый плагин определяется следующим образом: 

    <script>
$(function() {
    $( "#sortable" ).sortable({
    placeholder: 'ui-state-highlight',
            stop: function(i) {
            placeholder: 'ui-state-highlight'
            $.ajax({
                type: "GET",
                url: "updatedb.php",
                data: $("#sortable").sortable("serialize")});
            }
    });
    $( "#sortable" ).disableSelection();
});
</script>

Буду признателен за любые идеи о том, как исправить.

1 Ответ

2 голосов
/ 14 февраля 2011

Вы ошиблись id.Все ваши добавленные элементы имеют одинаковый идентификатор: 

$('#videos').append(

    "<ul id=\"sortable\">"

Или вы просто добавляете неправильный элемент.Я думаю, код должен быть: 

$('#sortable').append(
    "<li id='item_" + id + "' class=\"ui-state-default\">" +
        "<div class=\"thumb\" id=\"" + id + "\">" +
            "<img src=\"http://i3.ytimg.com/vi/" + youtubeid + "/default.jpg\">" +
        "</div>" +
    "</li>"
);

Ваш код дает неправильную структуру HTML: 

<!-- video 1-->
<ul id='sortable'>
    <li><img/></li>
</ul>
<!-- video 2-->
<ul id='sortable'>
    <li><img/></li>
</ul>

Но правильный HTML должен выглядеть следующим образом: 

<ul id='sortable'>

    <!-- video 1-->
    <li><img/></li>

    <!-- video 1-->
    <li><img/></li>

</ul>
...