サイズ変更が一旦停止すると、垂直ルーラーのサイズをもう一度変更できません。

Question

下のリンクに示すように、垂直ルーラーでJQueryサイズ変更ウィジェットを使用しています。一度、私は東のハンドルを使用してサイズ変更を開始し、それを停止します。さて、私は再び定規のサイズを変更しようとすると、私はサイズ変更のハンドルが表示されないを見つける。私はhtml divをチェックしましたが、ui-resizable divは削除されました。どんな種類の助けが役に立つでしょう。

私のJSコード：

createRuler(); 

$('.ruler').resizable({ 
    handles: "e", 
    resize: function(event, ui) { 
    $('.ruler').empty(); 
    createRuler(); 
    }, 
    stop: function(event, ui) {}, 
    start: function(event, ui) {} 
}); 

Check here for complete code

Answer 1

この行は、それを破る：

$('.ruler').empty(); 

私は何が起こっているかと思いますが、あなたがデータをダンプ（または参照されていることである - ありませんあなたがクリックするたびに、あなたのアプリケーション内でempty（）メソッドが何をするかを確かめてください）。これは最初にインスタンス化する際には問題ありませんが、次回にクリックするときには同じ関数を再度実行していますが、今回はサイズ変更のデータがありません。

ルーラーハンドルの最初のクリック時にのみ$('.ruler').empty();をトリガーするロジックを設定してください。

Answer 2

私のHTMLコード：

<div class="container"> 
<div class='ruler'></div> 
</div> 

私は私のJSコードでロジックを変更しました。 inner-div（ルーラー）のサイズを変更する代わりに、完全に機能するouter-div（コンテナ）にサイズ変更を適用しました。

更新JSコード：

createRuler（）。

$('.container').resizable({ 
    handles: "e", 
    alsoResize: ".ruler", 
    resize: function(event, ui) { 
    $('.ruler').empty(); 
    createRuler(); 
    }, 
    stop: function(event, ui) {}, 
    start: function(event, ui) {} 
});