動的に追加された要素をクリックすると何もしません

Question

私はdivを押すと同じクラスの別のdivが追加されます。しかし、動的に追加された要素をクリックすると、何も起こりません。

$('.container').on('click', function(){ 
 
    var newColumn = $('<li class="column"/>'); 
 
    var newState = $('<div class="container" unselectable="on">Nothing</div>'); 
 
    newState.appendTo(newColumn); 
 
    newColumn.appendTo($('#canvas')); 
 
});

.container{ 
 
    border:1px solid black; 
 
    width:100px; 
 
    height:40px; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    line-height:40px; 
 
    border-radius:10px; 
 
    
 
    -webkit-user-select: none; /* Chrome/Safari */   
 
    -moz-user-select: none; /* Firefox */ 
 
    -ms-user-select: none; /* IE10+ */ 
 
} 
 

 
.column{ 
 
    list-style-type: none; 
 
    display:inline; 
 
    width:100px; 
 
    float:left; 
 
    margin:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="canvas"> 
 
    <li class="column"> 
 
    <div class="container" unselectable="on"> 
 
     works 
 
    </div> 
 
    </li> 
 
</ul>

どのように私はすべての要素のクリックイベントの作業を行うことができますか？

Answer 1

.container要素がスクリプトによって自動的に作成されているので、あなたが新鮮なDOMに対処するためにイベント委任on()を使用する必要があります。

$('body').on('click', '.container', function(){ 
    //Your code here 
}); 

は、この情報がお役に立てば幸いです。

---

$(document).on('click', '.container', function(){ 
 
    var newColumn = $('<li class="column"/>'); 
 
    var newState = $('<div class="container" unselectable="on">Nothing</div>'); 
 
    newState.appendTo(newColumn); 
 
    newColumn.appendTo($('#canvas')); 
 
});

.container{ 
 
    border:1px solid black; 
 
    width:100px; 
 
    height:40px; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    line-height:40px; 
 
    border-radius:10px; 
 
    
 
    -webkit-user-select: none; /* Chrome/Safari */   
 
    -moz-user-select: none; /* Firefox */ 
 
    -ms-user-select: none; /* IE10+ */ 
 
} 
 

 
.column{ 
 
    list-style-type: none; 
 
    display:inline; 
 
    width:100px; 
 
    float:left; 
 
    margin:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="canvas"> 
 
    <li class="column"> 
 
    <div class="container" unselectable="on"> 
 
     works 
 
    </div> 
 
    </li> 
 
</ul>