jqueryui嵌套可选问题
我需要在运行时单击按钮，水平和垂直地创建/拆分我的div元素。我能够创建一个div容器，其中根据单击的按钮分割画布 例如：当我单击horizontalSplit按钮时，它应该在所选容器中创建两个新div。我遇到嵌套子div元素的问题。当我试图选择最里面的子代码时，选择父div也是一个问题。我不明白为什么我的不可选择类会自动获得“ui selected” 这就是我到目前为止所做的：jqueryui嵌套可选问题,jquery,css,jquery-ui,Jquery,Css,Jquery Ui,我需要在运行时单击按钮，水平和垂直地创建/拆分我的div元素。我能够创建一个div容器，其中根据单击的按钮分割画布 例如：当我单击horizontalSplit按钮时，它应该在所选容器中创建两个新div。我遇到嵌套子div元素的问题。当我试图选择最里面的子代码时，选择父div也是一个问题。我不明白为什么我的不可选择类会自动获得“ui selected” 这就是我到目前为止所做的： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="scripts/jquery-1.6.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>
<style>
#canvasWrapper {
border: 1px solid #DDDDDD;
height: 500px;
vertical-align:top;
margin-left: auto;
margin-right: auto;
width: 90%;
}
.Frame {
border: 1px solid #DDDDDD;
height: 500px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.hFrame {
border: 1px solid #DDDDDD;
height: 50%;
width: 100%;
position:relative;
}
.nonSelectable {
border: 1px solid #DDDDDD;
height: 50%;
width: 100%;
position:relative;
}
.vFrame {
border: 1px solid #DDDDDD;
height: 100%;
width: 50%;
position:relative;
}
.buttonBar {
position: relative;
margin-left: auto;
margin-right: auto;
width:90%;
}
.Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting { background: blue; }
.Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected { background: grey; }
.hFrame ui-selectable { background: yellow; }
.hFrame ui-selected { background: green; }
.hFrame ui-selectable ui-selected { background: pink; }
</style>
</head>
<body>
<div id="canvasWrapper">
<div id="canvasFrame" class="Frame">
</div>
</div>
<div class="buttonBar">
<input id="B1" class="button" type="submit" value="Horizontal Split">
<input id="B2" class="button" type="submit" value="Vertical Split">
</div>
<script>
$(document).ready(function()
{
$("#canvasFrame").addClass("ui-selected");
$(function() {
$( ".Frame" ).selectable({
// cancel: '.nonSelectable'
});
$( ".hFrame" ).selectable({
// cancel: '.nonSelectable'
});
$( ".vFrame" ).selectable();
// $( ".nonSelectable" ).selectable("disable");
});
addHFrame();
addVFrame();
});
function addHFrame(){
$("#B1").unbind('click.addit').bind('click.addit',function()
{
var numSplits=2;
var select="";
$(".ui-selected ").each(function () {
for (var i=0; i<numSplits ; i++){
$(this).removeClass('ui-selected ui-selectable');
$(this).parent().removeClass('ui-selected ui-selectable');
var $newElement = '<div></div>';
$(this).append($newElement);
$(this).children().addClass("hFrame");
//$(this).unbind('ui-selected ui-selectable');
// $(this).parent().selectable("disable") ;
// $(this).remove("hFrame").addClass("nonSelectable") ;
addHFrame();
}
$(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);
});
});
}
function addVFrame(){
$("#B2").click(function()
{
$("div.ui-selected").each(function () {
// $(this).append('<div class="vFrame"> </div>');
alert("Button Vertical Split Clicked");
});
});
}
</script>
</body>
</html>
#画布{
边框：1px实心#DDDDDD；
高度：500px；
垂直对齐：顶部；
左边距：自动；
右边距：自动；
宽度：90%；
}
.框架{
边框：1px实心#DDDDDD；
高度：500px；
左边距：自动；
右边距：自动；
宽度：100%；
}
.hFrame{
边框：1px实心#DDDDDD；
身高：50%；
宽度：100%；
位置：相对位置；
}
.不可选举{
边框：1px实心#DDDDDD；
身高：50%；
宽度：100%；
位置：相对位置；
}
.vFrame{
边框：1px实心#DDDDDD；
身高：100%；
宽度：50%；
位置：相对位置；
}
巴顿巴先生{
位置：相对位置；
左边距：自动；
右边距：自动；
宽度：90%；
}
.Frame.ui选择、.vFrame.ui选择、.hFrame.ui选择{背景：蓝色；}
.Frame.ui已选定，.vFrame.ui已选定，.hFrame.ui已选定{背景：灰色；}
.hFrame ui可选{背景：黄色；}
.hFrame用户界面已选定{背景：绿色；}
.hFrame用户界面可选用户界面已选定{背景：粉红色；}
$（文档）.ready（函数（）
{
$（“#canvasFrame”）.addClass（“选中的ui”）；
$（函数（）{
$（“.Frame”）。可选({
//取消：'.不可选择'
});
$（“.hFrame”）。可选({
//取消：'.不可选择'
});
$（“.vFrame”）.selective（）；
//$（“.nonSelectable”）。可选（“禁用”）；
});
addHFrame（）；
addVFrame（）；
});
函数addHFrame（）{
$（“#B1”）.unbind（'click.addit'）.bind（'click.addit'，function（）
{
var numSplits=2；
var select=“”；
$（“.ui已选定”）.each（函数（）{
对于（var i=0；i而言，听起来您需要防止事件传播：
类似问题：
单击元素时，事件会在DOM中冒泡，直到到达最高级别的HTML节点。这称为事件传播。因此，除非停止事件传播，否则会在元素的所有祖先上激发事件。可以这样做：
HTML-
听起来您需要防止事件传播：
类似问题：
单击元素时，事件会在DOM中冒泡，直到到达最高级别的HTML节点。这称为事件传播。因此，除非停止事件传播，否则会在元素的所有祖先上激发事件。可以这样做：
HTML-
我尝试了提出的解决方案，部分奏效
但若容器是可选择的或不可选择的，那个么鼠标选择项目的方式就不同了
如果容器不可选择-一切正常。
如果容器是可选择的-您必须单击该项并进行小拖动，仅需几个像素
没有指定距离，所以我的期望是它应该以相同的方式工作。我甚至尝试调试jQuery，但没有找到解决方案
有什么想法吗？我尝试了提议的解决方案，部分奏效
但若容器是可选择的或不可选择的，那个么鼠标选择项目的方式就不同了
如果容器不可选择-一切正常。
如果容器是可选择的-您必须单击该项并进行小拖动，仅需几个像素
没有指定距离，所以我的期望是它应该以相同的方式工作。我甚至尝试调试jQuery，但没有找到解决方案
有什么想法吗？我知道这并不能为您的问题提供一个技术解决方案，但这是一个比解决方案更简单的答案。停止使用.selective..selective是一个提供点击功能的助手，在这一点上，没有它比重新配置更容易做您想做的事情。
与过滤器一起使用“单击”，并添加一些事件传播替代以返回到“可选样式”功能：
$('#canvas').on('click', '.control', function (event) {
var ui = $(this);
$('#canvas .control').removeClass('ui-selected');
ui.addClass('ui-selected');
-- do stuff --
event.stopPropagation();
event.preventDefault();
});
要检测，请单击“关闭”：
$('#canvas').on('click', function () {
$('#canvas .control').removeClass('ui-selected');
-- Do Stuff when not selected --
});
此操作不会因事件而激发。stopPropagation（）
$('#canvas').on('click', '.control', function (event) {
var ui = $(this);
$('#canvas .control').removeClass('ui-selected');
ui.addClass('ui-selected');
-- do stuff --
event.stopPropagation();
event.preventDefault();
});
$('#canvas').on('click', function () {
$('#canvas .control').removeClass('ui-selected');
-- Do Stuff when not selected --
});