脚本元素在JQuery内部无效.append()

时间:2011-02-14 14:29:02

标签: jquery json jquery-ui jquery-ui-sortable

我在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输出。 e.g。

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可排序插件。当我使用PHP生成html(不使用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 个答案:

答案 0 :(得分:2)

您的id不正确。所有附加元素都具有相同的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>