我正在开发一个网站构建器，我需要在运行时(由用户)在主要部分添加框，当我单击这些框时，应该会出现与该框相关的一些选项。当我在主要部分创建一个 div(框)并单击它时，它工作正常并出现选项菜单。但是当我添加多个框并单击我添加的第一个框时，第一个框调用了两次点击功能，并且由于切换选项，第一个框的菜单框没有显示。这是代码，但它似乎在这里不起作用(可能是 jquery-ui js 和 css 库问题)。
var x_axis = 0; y_axis = 0;
$("#menubutton").mouseover(function(){
$("#menubutton").css("cursor","pointer");
});
// it will create a new div in mainsection div
$("#menubutton").click(function(){
var totalChildren = $("#mainSection").children().length;
var id = totalChildren+1;
$("#mainSection").append("<div id='"+id+"' class='newDiv' style='background-color:white; border:2px solid black; width:100px; height:100px; position:absolute; left:"+x_axis+"px; top:"+y_axis+"px; z-index:1;'></div>");
$(".newDiv").draggable({
containment : 'parent',
opacity: 0.5
});
// For editing options of div
$(".newDiv").click(function(){
divId = $(this).attr("id");
$("#optionsMenu").toggle();
alert(divId);
});
});#optionsMenu{
border: 1px solid black;
width: inline-block;
height: 500px;
position:absolute;
right: 10px;
top:50px;
z-index: 2;
padding: 10px;
display: none;
background-color: #14C4E4;
}
.buttonStyle{
border:1px solid green;
color: white;
background-color:5BDD45;
text-align:center;
border-radius:3px 3px 3px 3px;
position: relative;
left:0px;
padding: 5px;
display: inline-block;
}<body>
<div class="button" >
<span id="menubutton" class="buttonStyle">Add Box</span>
</div>
<div class="col-md-10" id="mainSection">
<div style="border:1px solid black; height:400px; position:relative;">
</div>
</div>
<div id="optionsMenu">
<div id="boxOptions" style="z-index:2">
The options for the box will be shown here!
</div>
</div>
</body>最佳答案
使用您代码中的以下几行
// For editing options of div
$(".newDiv").click(function(){
divId = $(this).attr("id");
$("#optionsMenu").toggle();
alert(divId);
});
每次点击它都会创建一个重复的点击功能，附加到现有的
.newDiv。这使得选项 div 切换两次或更多次，从而导致选项 div 被隐藏。
修改您的代码如下。 JSFiddle Link
var x_axis = 0;
y_axis = 0;
$("#menubutton").mouseover(function() {
$("#menubutton").css("cursor", "pointer");
});
function toggleOption() {
divId = $(this).attr("id");
$("#optionsMenu").toggle();
alert(divId);
}
// it will create a new div in mainsection div
$("#menubutton").click(function() {
var totalChildren = $("#mainSection").children().length;
var id = totalChildren + 1;
$("#mainSection").append("<div id='" + id + "' class='newDiv' style='background-color:white; border:2px solid black; width:100px; height:100px; position:absolute; left:" + x_axis + "px; top:" + y_axis + "px; z-index:1;'></div>");
$(".newDiv").draggable({
containment: 'parent',
opacity: 0.5
});
// For editing options of div
$('.newDiv').off('click', toggleOption);
$('.newDiv').on('click', toggleOption);
});
关于javascript - 如何为动态添加的新div添加选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43437394/