Question

我有这个问题，每次在ajax成功时使用div.load加载div时，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);
    }
})

}）;

我在sortable.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

我通过在load函数体中调用sortable.js脚本找到了解决方法。代码如下所示：

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

Jquery - 当调用div.load时，Sortable不起作用

1 个答案: