Displaying height disables jquery ui resizable

问题:

I'm trying to create my own calendar (sort of) by using jQuery UI. I've added resizable and sortable to my list items and it all works perfect. The next was to display time inside the list items that update when the list items get resized. I wanted to start by displaying the height inside the list items, but doing that disables the resizable function.

Like so: http://jsfiddle.net/PaulvdDool/9PXNc/

Displaying the height outside the list doesn't affect the resizable event. Like so: http://jsfiddle.net/PaulvdDool/gBANx/1/

How do I fix this?

回答1:

Please try:

function getHeight(event) {
    var height = $('#'+event).height();
    $('#'+event+' > p').html(height);
}

why you are using document.getElementById().innerHTML when you are jquery ready? The trick is to apply the new html only to the "p" tag.

I think if you would like to use

$('#'+event).html(height);

you need another

$( ".event" ).resizable({
    grid: 10,
    minWidth: 250,
    maxWidth: 250,
    minHeight: 25,
});

inside your getHeight() Method.