2

divのリストを作成しようとしています。新しいレイヤーボタンをクリックすると、一意のIDで作成された新しいdivがあります。これらの動的に追加されたdivを呼び出そうとすると、応答がありません。既存のdivが機能するため、混乱しています。

<input type="submit" id="newLayer" value="New Layer">

 <div id="layersContainer" class="layerscontainer">
    <div class="layer" id="layer1">fadfa</div>
    <div class="layer" id="layer2">2</div>            
 </div>


var newLayerCounter = 2;
var layerID = "";
var layersArray = new Array();
var clickedElement = "";


function selectLayer(){

      $(clickedElement).css({"background-color":"yellow"});

    }

$('#layersContainer div').on("click", function(){

    clickedElement = $(this).attr("id");
    alert(clickedElement);
    selectLayer();

});

$('#newLayer').on("click", function(){

    newLayerCounter = newLayerCounter + 1;
    layerID = "#layer"+ newLayerCounter;

    $('<div/>', {
    id: "layer"+ newLayerCounter,
    class: "layer"
   }).appendTo('#layersContainer');

    $(layerID).text('hey');

})

動作中のJSfiddleへのリンクは次のとおりです

http://jsfiddle.net/Q3dSp/24/

4

4 に答える 4

3

あなたの

$('#layersContainer div').on("click", function(){

に

$(document).on("click", '#layersContainer div', function () {
    clickedElement = $(this).attr("id");
    alert(clickedElement);
    selectLayer();
});

委任イベントとして知られています。

于 2013-02-22T17:39:05.150 に答える
0

で試してみてください$('#layersContainer').on("click", "div", function(){ (...) });

http://jsfiddle.net/3hqfn/1/

于 2013-02-22T17:38:05.080 に答える
0

変化する ：

$('#layersContainer div').on("click", function(){

これとともに：

$('#layersContainer').on("click", "div", function(){
于 2013-02-22T17:38:17.647 に答える
0

これで試してみてください：

 $('#layersContainer').on("click", 'div', function(){
clickedElement = $(this).attr("id");
    alert(clickedElement);
    selectLayer();
 });

この状況では、event delegation to existing closest parentいつdom was ready.

于 2013-02-22T17:40:56.863 に答える