Die vertikale Linie kann nicht mehr angepasst werden, sobald die Größenänderung beendet wird

Question

Ich benutze das JQuery Resizable-Widget auf dem vertikalen Lineal, wie im folgenden Link gezeigt. Sobald ich anfange zu skalieren, benutze den Ostgriff und halte es an. Jetzt versuche ich, das Lineal erneut zu skalieren, und der Größenänderungs-Handle wird nicht angezeigt. Ich überprüfte das html div, aber das ui-resizable div wird gelöscht. Jede Art von Hilfe wäre nützlich.

Mein JS-Code:

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

Diese Linie bricht es:

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

Ich denke, was passiert, ist, dass Sie die Daten Dumping (oder Referenz - nicht Vergewissern Sie sich genau, was die Methode empty() in Ihrer Anwendung tut, wenn Sie klicken. Dies ist in Ordnung, wenn Sie es zum ersten Mal instanziieren - aber beim nächsten Mal, wenn Sie darauf klicken, führen Sie dieselbe Funktion erneut aus - dieses Mal ohne Daten für die Größenänderung.

Versuchen Sie, eine Logik einzurichten, die nur beim ersten Klicken auf das Lineal-Handle $('.ruler').empty(); auslöst.

Answer 2

Meine Html-Code:

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

änderte ich die Logik in meinem JS-Code. Anstatt die Größe des inneren Teils (Lineals) zu verändern, habe ich die Größe auf das äußere Teil (Container) angewendet, was perfekt funktioniert hat.

Aktualisiert JS-Code:

createRuler();

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