如何將選項添加到動態添加的新div div

我正在開發一個網站生成器，其中我需要在運行時（用戶）在主節中添加框，當我單擊該框時，與該框相關的某個選項應該出現。當我在主要部分創建一個div（box）並點擊它時，它工作正常，並出現選項菜單。但是當我添加多個框並單擊我添加的第一個框時，第一個框會調用兩次點擊功能，並且由於切換選項，第一個框的菜單框未顯示。這裏的代碼，但它似乎並沒有在這裏工作（可能是jquery-ui js和css庫問題）。如何將選項添加到動態添加的新div div

var x_axis = 0; y_axis = 0; 
 
$("#menubutton").mouseover(function(){ 
 
\t $("#menubutton").css("cursor","pointer"); 
 
}); 
 
\t \t \t 
 
// it will create a new div in mainsection div 
 
$("#menubutton").click(function(){ 
 
\t var totalChildren = $("#mainSection").children().length; 
 
\t var id = totalChildren+1; 
 
\t $("#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>"); 
 
\t \t \t \t \t 
 
    $(".newDiv").draggable({ 
 
     containment : 'parent', 
 
     opacity: 0.5 
 
    }); 
 

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

 
     $("#optionsMenu").toggle(); 
 
     alert(divId); 
 
    }); 
 
});

#optionsMenu{ 
 
\t border: 1px solid black; 
 
\t width: inline-block; 
 
\t height: 500px; 
 
\t position:absolute; 
 
\t right: 10px; 
 
\t top:50px; 
 
\t z-index: 2; 
 
\t padding: 10px; 
 
\t display: none; 
 
\t background-color: #14C4E4; 
 
} 
 

 
.buttonStyle{ 
 
\t border:1px solid green; 
 
\t color: white; 
 
\t background-color:5BDD45; 
 
\t text-align:center; 
 
\t border-radius:3px 3px 3px 3px; 
 
\t position: relative; 
 
\t left:0px; 
 
\t padding: 5px; 
 
\t display: inline-block; 
 
}

<body> 
 
\t \t <div class="button" > 
 
\t \t \t <span id="menubutton" class="buttonStyle">Add Box</span> 
 
\t \t </div> 
 
\t \t <div class="col-md-10" id="mainSection"> 
 
\t \t \t <div style="border:1px solid black; height:400px; position:relative;"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t \t \t \t 
 
\t \t <div id="optionsMenu"> 
 
\t \t \t <div id="boxOptions" style="z-index:2"> 
 
\t \t \t The options for the box will be shown here! 
 
\t \t \t </div> 
 
\t \t </div> \t 
 
\t </body>

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

來源

2017-04-16 Asad Ullah

你的代碼需要jQuery框架。您可以在小提琴的左側添加一個信號源，或者在JavaScript區域中點擊齒輪更方便地添加信號源。在下拉框架和擴展選擇jQuery 3.2.1（或其他版本）。同樣在負載類型設置ondomready – yezzz

使用下面的行從您的代碼

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

});

來源

2017-04-16 13:05:30

感謝您的答覆。它的工作，但只是一個小問題，現在我不得不雙擊div來顯示/隱藏選項菜單，當我添加多個div，你可以看看這個嗎？ –

抱歉，我沒有看到jsfiddle鏈接，它的工作完美..只是我需要..謝謝一堆。 –

檢查更新[** JSFiddle Here **]（https://jsfiddle.net/44uyxLrh/9/） –

如何將選項添加到動態添加的新div div

回答

相關問題