更改內容後，可調整大小停止工作在div上

Question

我使用jQuery UI的resizable函數來創建顯示文件上傳大小的內容的div（引導面板）。可調整大小的作品最初在div上，但是在我用上傳的文件內容更新之後，它停止工作，並且不會出現可調整大小的光標。這種行爲可以在下面的代碼片段和this jsfiddle中觀察到。

$("#filePreview").resizable({ 
 
    handles: "n, s", 
 
    minHeight: 100 
 
}); 
 

 
function readFile(file) { 
 
    var reader = new FileReader(); 
 
    reader.onload = readSuccess; 
 

 
    function readSuccess(evt) { 
 
    $('#filePreview').text(evt.target.result); 
 
    }; 
 
    reader.readAsText(file); 
 
} 
 

 
$(document).on('change', '#inputFile', function() { 
 
    readFile(this.files[0]); 
 
});

.preview-panel { 
 
    white-space: pre-line; 
 
    overflow-y: scroll; 
 
    min-height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <form class="form-inline"> 
 
    <div class="form-group"> 
 
     <label for="inputFile">File Input</label> 
 
     <input type="file" class="form-control" id="inputFile"> 
 
    </div> 
 
    </form> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading">File Preview</div> 
 
    <div class="panel-body preview-panel" id="filePreview"></div> 
 
    </div> 
 
</div>

我看到的resizable for dynamically added elementsquestions，並試圖在div與新文件的內容，但it didn't work更新後重新初始化調整大小。即使在內容更改後顯示最近一次上傳文件的預覽，我如何使resizable工作在div上？

Answer 1

在設置文本之前，您是否嘗試過「銷燬」可調整大小的div，然後在設置文本後重新初始化它？

function readFile(file) { 
    var reader = new FileReader(); 
    reader.onload = readSuccess; 

    function readSuccess(evt) { 
    $('#filePreview').resizable('destroy'); 
    $('#filePreview').text(evt.target.result); 
    $("#filePreview").resizable({ 
     handles: "n, s", 
     minHeight: 100 
    }); 
    }; 
    reader.readAsText(file); 
} 

我不知道這是否是一個插件的怪癖，但你必須滾動到div內容的頂部才能看到/使用可調整大小的「把手」。

編輯：爲了與「處理」失去了滾動時位置解決這個問題，我添加了一個輔助函數使用的#filePreview +的.preview-panel +一個的height的的scrollTop值添加top值附加偏移量（在這種情況下爲27px）。無論何時在#filePreview上觸發scroll事件，我都會相應地調整句柄的位置。

$("#filePreview").on('scroll', function() { 
    adjustHandlePosition(); 
}); 

function adjustHandlePosition() { 
    $('.ui-resizable-s').css('top', ($("#filePreview").scrollTop() + $('.preview-panel').height() + 27) + "px"); 
} 

當resize事件發生#filePreview的adjustHandlePosition()方法也被稱爲：

$("#filePreview").resizable({ 
    handles: "n, s", 
    minHeight: 100, 
    resize: function(event, ui) { 
    adjustHandlePosition(); 
    } 
}); 

Updated Fiddle