2

现在我知道有很多关于这个的问题，但我没有发现有人和我有同样的问题，所以让我们开始吧。

所以 jquery ui resizable 函数将我的<img />元素设置dimensions为0px我什至尝试设置我自己的width和height. 我已经尝试删除它，之后一切看起来都很好，甚至draggable可以正常工作。

那么可能是什么原因造成的呢？

这是 Jsfiddle 示例：http: //jsfiddle.net/SY9yq/3/

和代码本身：

#test{
    width:90%;
    height:500px;
}
.container{
    display:inline-block;
    left:20px;
    top:20px;
    border:1px solid black;
}​
$(document).ready(function(){
    callFunctionOne();

    function callFunctionOne(){
        elements = buildElements();
        $("#test").append(elements);
    }

    function buildElements(){
        return $("<div>")
            .addClass("container")
            .draggable()
            .append(
                $("<img />")
                    .addClass("image")
                    .attr("src", "http://blog.stackoverflow.com/audio/stackoverflow-300.png")
                    //if i delete this everything will work
                    .resizable()
                    //but if i keep it it sets image dimensions to 0px                
            );                      


    }
});

顺便说一句，这是我实际脚本的快速示例，所以有点混乱：P 所以不要怪我哈哈

4

1 回答 1

0

您需要确保在调用图像之前已加载图像.resizable()。

固定 jsFiddle：http: //jsfiddle.net/VKe5h/

$(document).ready(function() {
    callFunctionOne();

    function callFunctionOne() {
        elements = buildElements();
        $("#test").append(elements);
    }

    function buildElements() {
        return $("<div>")
            .addClass("container")
            .draggable().append(
                $('<img class="resizable" />')
                .addClass("image")
                .attr("src", "http://blog.stackoverflow.com/audio/stackoverflow-300.png")
                .load(function() {
                    $(this).resizable();
                })
            );
    }
});​
于 2012-07-06T06:15:15.217 回答