div.loadが呼び出されたときにJquery - Sortableが機能しませんでした

Question

div_loadを使用してdivがロードされるたびに、Ajaxの成功でsortableのコードが動作しないという問題があります。 Sortableは、ページを手動でリフレッシュした後に再び機能します。これに対して可能な解決策は何でしょうか？

$(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); 
    } 
}) 

}）;

私は

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

}）のようなsortable.jsで私のコードを持っています。

と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

を私はload関数の本体でsortable.jsスクリプトを呼び出すことにより、これに対する解決策を見つけました。コードは次のようになります。

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