从第二次点击起无法调整大小

Question

从第二次点击起无法调整大小，您能解释一下为什么吗？ 在下面的代码中，实际上我正在尝试向div添加衬衫和裤子。 当添加它们时，我必须调整它们的大小，所以我什至还添加了调整大小按钮。 调整大小是第一次，无论何时我们尝试添加另一件衬衫或裤子。 调整大小不起作用。 我可以知道原因，并帮助我完成这个项目。

 <html lang="en">
 <head>
 <title>Outfit Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
  // sets draggable the elements with id="shirt"
  $('#shirt').draggable({
    cursor: 'move',        // sets the cursor apperance
    containment: '#leftpanel'    // sets to can be dragged only within its parent
  });
  // sets draggable the paragraph inside #trousers
  $('#trousers').draggable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });

  $('#btn').click(function() {
    // removes all LI with class="cls" in OL
    $('#shirt').resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });
  $('#trousers').resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });
  });
});

  var shirt;
  var pant;
  function selectshirt(src)
  {
  shirt = src;
  path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
  invisible("middlepanel");
  visible("rightpanel");

  document.getElementById("shirt").innerHTML=path;
  document.getElementById("cart").style.visibility="visible";
  }
  function selectpants(src)
  {
  pant = src;
  path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
  document.getElementById("trousers").innerHTML=path;
  }
  function addtocart()
  {
  alert("Shirt:"+shirt+"\npant:"+pant);
  }
  function changeshirt()
  {
  visible("middlepanel");
  invisible("rightpanel");
  }
  function changepant()
  {
  visible("shirtcontainer");    
  invisible("pantcontainer");
  }
  function visible(containername)
  {
  document.getElementById(containername).style.visibility="visible";
  }
  function invisible(containername)
  {
  document.getElementById(containername).style.visibility="hidden";
  }
  </script>
</head>

<body>
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;">
    <div id="shirt"  style="left:0;height:300px;width:300px;"></div>
    <div id="trousers" style="left:0;height:300px;width:300px;" ></div>
</div> 
<div style="left:0;height:70%;" id="cart">
    <button  onclick="changeshirt()">Change Shirt</button>
    <button  onclick="addtocart()">Add to cart</button>
    <button id="btn">Resize</button>
</div> 
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
    <div id="shirtcontainer">
        <img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
    </div>
</div> 
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
    <div id="pantcontainer">
        <img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
    </div>
</div>


</body>
<script>
invisible("rightpanel");
invisible("cart");
</script>
</html>

请为此提供帮助，并从第二次点击开始调整大小。

Answer 1

首先，很抱歉，因为我正在使用iPhone，而且很难读取您的代码。
但是可能存在一些问题：
1）您不刷新可调整大小的元素，可以尝试重新初始化插件功能
2）您正在尝试调整重复ID的大小。
3）如果要添加要添加的内容，并且要使用click函数或类似函数，则必须将其与$（document）.on（event，element，function（）{}）绑定
残酷的解决方案
销毁并重新激发元素

Answer 2

@Dheed感谢您的解决方案。 如您所说，我已尝试销毁它并重新初始化

$("#shirt").resizable("destroy"); 
  $("#shirt").resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });

这对我有用。

非常感谢Dheed

从第二次点击起无法调整大小

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-02-28 11:36:08

解决方案2
0 2013-03-01 01:46:38

从第二次点击起无法调整大小

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-02-28 11:36:08

解决方案2 0 2013-03-01 01:46:38

解决方案1
0 已采纳 2013-02-28 11:36:08

解决方案2
0 2013-03-01 01:46:38