我需要在运行时单击按钮时水平和垂直创建/拆分我的 div 元素。我能够创建一个 div 容器，在其中根据单击的按钮拆分 Canvas 。
例如:当我点击 horizontalSplit 按钮时，它应该在所选容器中创建两个新的 div。我遇到了嵌套子 div 元素的问题。当我尝试选择最里面的子代码时，也正在选择父 div，这会产生问题。我无法弄清楚为什么我的 nonSelectable 类会自动获得“ui-selected”
这是我到目前为止所做的:
<!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>
最佳答案
听起来您需要阻止事件传播: http://api.jquery.com/event.stopPropagation/
类似问题:jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?
当元素被点击时，事件会在 DOM 中向上冒泡，直到它到达最高级别的 HTML 节点。这称为事件传播。因此，除非事件传播停止，否则事件会在元素的所有祖先上触发。这可以像这样完成:
HTML-
<body>
<div id="container">
<a href="javascript:void(0);" id="click-element"></a>
</div>
</body>
脚本-
$('#click-element').click(function(event){
//prevent container and body from triggering click event
event.stopPropagation();
//do stuff
});
关于Jquery UI 嵌套 Selectable 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6207406/