Jquery - 调用 div.load 时，可排序不起作用

Question

我有这个问题，每次在 ajax 成功中使用div.load 加载div 时，可排序的代码将不起作用。手动刷新页面后，可排序将再次工作。对此可能的解决方案是什么？

$(document).on('click', '#add-song-tag', function() {
tag_id = $('#tags').val();
$.ajax({
    url: base_url + '/songtags/add_song_tag',
    type: 'POST',
    data: {
        song_info_id: song_info_id,
        tag_id: tag_id
    },
    success: function() {

        $('#category').load(window.location.href + ' #category');


        $('#modal-categories').trigger('change');
    },
    error: function(xhr) {
        console.log(xhr.responseText);
    }
})

}(;

我的代码是可排序的.js比如

$( function() {
$( "#sortable, #sortable1" ).sortable({
  connectWith: ".draggable-group",
  start: function(event, ui){
    $(ui.item).width($('#sortable div').width());
  }
  // containment: "parent",
  // tolerance: "pointer"
}).disableSelection();

} (;

在 HTML 中，它看起来像这样：

<?php if($selected_tag_for_m['category_id'] == $tempo_id):?>
                <div class="btn-group draggable-group">
                  <div>
                    <a href="" data-id="<?php echo $selected_tag_for_m['info_tag_id']?>"><i class="fa fa-minus-circle fa-lg delete-a-tag" aria-hidden="true"></i></a>
                  </div>
                  <div type="button" class="btn btn-default btn-color"><i class="fa fa-circle-o custom-text-blue"></i> <?php echo $selected_tag_for_m['tag_name'];?> </div>
                  <div type="button" class="btn btn-default custom-bgcolor-blue dropdown-toggle" data-toggle="dropdown">
                    <span><i class="fa fa-pencil"></i></span>
                    <span class="sr-only">Toggle Dropdown</span>
                  </div>                
                  <ul class="dropdown-menu" role="menu" id="tempo">
                    <?php foreach($tempos as $tempo):?>
                    <li data-id="<?php echo $selected_tag_for_m['info_tag_id']?>"><a href="" data-id="<?php echo $tempo['tag_id']?>" class="songtaglist" ><?php echo $tempo['tag_name'];?></a></li>
                    <?php endforeach;?>
                  </ul>
                </div>
            <?php endif;?>

Answer 1

我通过在加载函数的主体中调用可排序.js脚本找到了解决方案。代码如下所示：

$('#category').load(window.location.href + ' #category', function(){
                $.getScript(base_url + '/assets/js/sortable.js');                                               
            });