動的に追加された新しいdivにオプションを追加する方法

私は実行時に（ユーザによって）メインセクションにボックスを追加する必要があるウェブサイトビルダーを開発しています。そのボックスをクリックすると、出現するはずです。メインセクションに1つのdiv（ボックス）を作成してクリックすると、正常に動作し、オプションメニューが表示されます。しかし、複数のボックスを追加して、追加した最初のボックスをクリックすると、最初のものがクリック機能を2回呼び出すので、最初のボックスのメニューボックスは表示されませんでした。ここにコードがありますが、ここでは動作していないようです（jquery-ui jsとcssライブラリの問題があります）。すべてので動的に追加された新しい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エリアでもっと便利にコグをクリックします。ドロップダウン> Frameworks＆ExtensionsでjQuery 3.2.1（または別のバージョン）を選択します。また、ロードタイプでは、返信のためにondomready – yezzz

あなたのコードから以下の行を使用して

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

それは既存の .newDivに追加された重複クリック機能を作成します。 Options divを2回以上切り替えると、オプション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にオプションを追加する方法

答えて

関連する問題