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

Question

I'm developing a website builder in which i need to add boxes in main section at runtime (by user) and when i click on that boxes, some option related to that box should appear. 我正在开发一个网站构建器，其中需要在运行时（按用户）在主要部分中添加框，当我单击该框时，应显示与该框相关的一些选项。 when i create one div (box) in the main section and click on it, it works fine and options menu appears. 当我在主要部分中创建一个div（框）并单击它时，它工作正常，并显示选项菜单。 but when i add multiple boxes and click on the first box which i added, the first one calls the click function twice, and due to toggle option, the menu box for first box didn't show up. 但是，当我添加多个框并单击添加的第一个框时，第一个框会调用两次单击功能，并且由于切换选项，第一个框的菜单框没有显示。 Here's the code, but it doesn't seems to work here (may be jquery-ui js and css libraries issue). 这是代码，但在这里似乎不起作用（可能是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/ https://jsfiddle.net/44uyxLrh/7/

Answer 1

Using the below lines from your code 使用代码中的以下几行

  // For editing options of div
  $(".newDiv").click(function(){
      divId = $(this).attr("id");
      $("#optionsMenu").toggle();
      alert(divId);
  });

at every click it creates a duplicate click function that is appending on existing .newDiv . 每次单击都会创建一个重复的单击函数，该函数会附加到现有的.newDiv 。 Which make the Options div to toggle twice or more, which results in options div to be hidden. 这会使“选项div”切换两次或多次，从而导致“选项div”被隐藏。

Modify your code as below. 如下修改您的代码。 JSFiddle Link JSFiddle链接

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 个解决方案

解决方案1
0 已采纳 2017-04-16 13:05:30

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-16 13:05:30

解决方案1
0 已采纳 2017-04-16 13:05:30