我正在开发一个网站构建器,其中需要在运行时(按用户)在主要部分中添加框,当我单击该框时,应显示与该框相关的一些选项。当我在主要部分中创建一个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>





https://jsfiddle.net/44uyxLrh/7/

最佳答案

使用代码中的以下几行

  // 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);

});

08-25 11:51
查看更多