脚本元素在JQuery.append（）中不起作用

我在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");

});

$.get（'showplaylist.php'，{playlist:“收件箱”}，函数（数据）{
对于（变量i=0；i

我循环使用的函数解压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>"

        );
}

函数videoThumb（id，youtubeid）
$（“#视频”）。追加(
“
”+
“
”+
"" +
"" +
"" +
“
”+
“
”
);
}

}

问题在于“可排序”元素。我正在使用jQueryUI可排序插件。当我使用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>

<ul id='sortable'>

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

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

</ul>

$（函数（）{
$（“#可排序”）。可排序({
占位符：“ui状态突出显示”，
停止：功能（i）{
占位符：“ui状态突出显示”
$.ajax({
键入：“获取”，
url:“updatedb.php”，
数据：$（“#可排序”）.sortable（“序列化”）}；
}
});
$（“#可排序”）.disableSelection（）；
});

---

如果您有任何关于如何修复的想法，我们将不胜感激。

您的

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应该如下所示：

    <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>

<ul id='sortable'>

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

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

</ul>





您如何绑定可排序插件？您好，不确定这意味着什么。您已经用pluginI更新了原始问题想要附加到的内容，别忘了勾选答案；）