Question

我正在开发一个网站构建器，我需要在运行时（按用户）在主要部分添加框，当我点击这些框时，应该会显示与该框相关的一些选项。当我在主要部分创建一个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/

Answer 1

使用代码中的以下行

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

});

如何向动态添加的新div添加选项

1 个答案: