Javascript 通过单击按钮对列表进行排序

我正在尝试使用此jPList库对列表进行排序。
问题是这个库使用了一个我不喜欢的select选项。我正试图用一个按钮来排列我的列表
在我的JSFIDLE上，您可以看到我创建的一个演示，我的列表更大，但类似：

我正在使用function.html在html中插入他们在页面上用来排序列表的代码。 如果我手动将其放入#sosdiv中，它可以工作，但通过单击按钮和.html不能工作

有人能帮我吗

$('.sortName').click(function () {
    $('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
});

$（'.sortName'）。单击（函数（）{
$（'sos'）.html（'clicked'）；
});

已解决：

使用此代码时，我必须在单击按钮后调用该功能：

$（'demo'）.jplist({
itemsBox:“.list”，
itemPath:“.list项”，
面板路径：'.jplist面板'
});
$（'.sortName'）。单击（函数（）{
$（'sos'）.html（'clicked'）；
$（'#demo'）.jplist({
itemsBox:“.list”，
itemPath:“.list项”，
面板路径：'.jplist面板'
});
});

$（“#main_div”）。在（'click'，“.sortName”，function（）上{

$（'sos'）.html（'clicked'）

}))

$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});

$('.sortName').click(function () {
    $('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');


$('#demo').jplist({
    itemsBox: '.list',
    itemPath: '.list-item',
    panelPath: '.jplist-panel'
    });
});