javascript - 如果应用于可调整大小的子元素,则 jQuery 可调整大小问题

标签 javascript jquery html jquery-resizable

这是我的完整代码,来自jQuery Resizable Example -

在我的示例中,我有两个 div 元素,id 为 parentchild,其中 child 元素是在 parent 元素中。我的问题是我无法调整 parent 元素的大小,即使我已将其设置为 resizable。有没有人遇到过类似的问题?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <style>
  #parent {
    padding: 40px;
    width:400px;
    height:400px;
  }

  #child { 
    width: 150px;
    height: 150px;
  }

  </style>
  <script>
  $(function() {    
    $( "#child" ).resizable();
    $( "#parent" ).resizable();
  });
  </script>
</head>
<body>

<div id="parent" class="ui-widget-content">
  <h3>Parent</h3>
    <div id="child" class="ui-widget-content">
        <h3>Child</h3>
    </div>
  </div>
</body>
</html>

注意

玩代码,我刚刚发现,这个问题只发生在我使 child 元素在 parent 元素之前可重新获取时。如代码所示 -

  $(function() {    
    $( "#child" ).resizable();
    $( "#parent" ).resizable();
  });

如果我将顺序更改为 -

  $(function() {    
    $( "#parent" ).resizable();
    $( "#child" ).resizable();
  });

它会很顺利地工作。我不确定为什么会这样。

我会尝试研究 jQuery 可调整大小的代码,但如果有人已经遇到并解决了这个问题,那将非常有帮助。

-谢谢

最佳答案

关于这个问题已经开工单on jQuery bugtracker (ticket #7711) ,但如您所见,它被认为“不是错误”,将您自己找到的变通方法指定为解决方案:

As a work-around, initialize the outer/parent resizable first and both are resizable

关于javascript - 如果应用于可调整大小的子元素,则 jQuery 可调整大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22501438/

相关文章:

javascript - Angular Datatables REST 基于每页数据,具有显式表格呈现

javascript - Jquery按下按钮向下滚动到每个部分的顶部

JavaScript/jQuery 如何选择动态创建的所有音频元素?

javascript - 如何调用对象内部的特定函数?

javascript - 搜索栏需要双击才能出现光标

javascript - 在无法访问 html 的情况下重新排序 Div

javascript - UI5 删除重复的提要列表项

javascript - .keydown() 当按下回车键时

c# - 使用 Javascript 的标签菜单

javascript - 如何从点击功能中排除ID?