Javascript 附加<；李>；到a<；ul>；但不会变成可拖动的jQuery

我试图让一个用户建立一个运动列表，然后将该列表中的运动列表项拖到一个“购物车”中。但是任何附加的列表项都不会变成可拖动的，我也不太确定为什么或者如何使它们成为可拖动的。 可以拖动占位符列表项，但不能拖动任何附加项

/*JS code for sports.html*/
$（函数（）{
//DOM就绪时的初始化代码
//隐藏第二步
$（“#步骤2”）.hide（）；
//工具提示
$（'#addSport'）。工具提示（）；
//自动完成运动的数组
var标签=[“射箭”、“羽毛球”、“棒球”、“垒球”、“足球”、“足球”、“排球”、“篮球”、“高尔夫”、“曲棍球”、“游泳”、“跑步”、“田径”、“体操”、“舞蹈”、“划船”、“网球”、“摔跤”、“举重”、“空手道”、“曲棍球”、“板球”、“马球”、“溜冰”、“射击”、“手球”、“击剑”、“自行车”、“拳击”“啦啦队”、“冲浪”、“滑雪板”、“躲避球”、“柔术”、“相扑”、“跆拳道”、“彩弹”、“袖珍台球”、“游泳池”、“钓鱼”、“滑雪”、“帆船”、“雪橇”、“长橇”、“壁球”]；
$（“#sportName”）.autocomplete({
来源：功能（请求、响应）{
var matcher=newregexp（“^”+$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（$.grep（标记、函数（项））{
返回匹配器测试（项目）；
}));
}
});
var-sportClick=0；
$（“#添加运动”）。单击（函数（）{
sportClick++；
体育；
sport=$（“#sportName”）.val（）；
//接受第一项运动并替换保持文字
如果（sportClick==1）{
$（“#sportList”）.html（“
”+sport+”
”）；
//$（“#sportList”）.html（运动+”
）；
} 
//任何其他运动项目都将添加到第一项中
否则{
$（“#sportList”）。追加（“
”+sport+”
）；
//$（“#sportList”）。追加（sport+”
）；
}
});
//允许运动项目变为可拖动
$（“#sportList li”）。可拖动({
助手：“克隆”
}).css（“光标”、“指针”）；
$（“#step2Btn”）。单击（函数（）{
$（'步骤2'）.show（）；
});
//允许将运动项目放入购物车
$（“#购物车”）。可拖放({
公差：“相交”，
drop：函数（evt、ui）{
var-obj；
$（“购物车”）.css（“高度”、“自动”）；
obj=ui.draggable；
log（“已删除！”）；
$（“#购物车”）.append（“
”+obj.html（）+
" ()" +
“
”；
}
});
//能够移除运动项目
$（“#购物车”）。在（“单击”，“a.remove”，函数（）{
log（“删除元素！”）；
$（this.parent（）.remove（）；
返回false；
});
getCart=函数（）{
var cartList，el，第1组；
cartList=[]；
$（“#购物车里”）。每个（功能）{
el=$（this.html（）；
控制台日志（“匹配元素”+el）；
group1=el.match（/^（+）\（对于我的特定情况，我所做的只是将draggable（）片段放入
#addSport
按钮，然后将draggable条件添加到所有新添加的列表项中

var sportClick = 0;
var sportItem;
$("#addSport").click(function () {
    sportClick++;
    var sport;
    sport = $("#sportName").val();
    sportItem = '<li>' + sport + '</li>';


    //takes the first sport and replaces the holding text
    if (sportClick === 1) {
        $("#sportList").html(sportItem);
        //$("#sportList").html(sport + '<br>');
    }
    //any other sports will be added to the first
    else {
        $("#sportList").append(sportItem);
        //$("#sportList").append(sport + '<br>');
    }

    //allows the sport items become draggable
    $("#sportList li").draggable({
        helper: "clone"
    }).css("cursor", "pointer");

    $("#step2Btn").click(function () {
        $('#step2').show();
    });
});

var sportClick=0；
运动项目；
$（“#添加运动”）。单击（函数（）{
sportClick++；
体育；
sport=$（“#sportName”）.val（）；
sportItem='
'+sport+'
'；
//接受第一项运动并替换保持文字
如果（sportClick==1）{
$（“#sportList”）.html（sportItem）；
//$（“#sportList”）.html（运动+”
）；
}
//任何其他运动项目都将添加到第一项中
否则{
$（“#sportList”）。追加（sportItem）；
//$（“#sportList”）。追加（sport+”
）；
}
//允许运动项目变为可拖动
$（“#sportList li”）。可拖动({
助手：“克隆”
}).css（“光标”、“指针”）；
$（“#step2Btn”）。单击（函数（）{
$（'步骤2'）.show（）；
});
});
您还必须使新元素可拖动。下面是@Jesunsonseq是的，我刚刚意识到了这一点。我刚刚发布了一个关于如何解决我的特定问题的答案。谢谢您的提示！