Question

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

 <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）如果你要添加附加内容而你想使用点击功能或类似功能，则必须将其与$（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 个答案: