jQuerys .onが委任されていても動的要素を扱うことはできません

Question

私は静的要素を持っていますが、私はそれを使用していますが.onは動的セレクタにバインドしません。

これは私が取り組んでいるよりも単純なバージョンですが、同じ問題があります。

divは静的な要素をクリックすると作成されますが、動的な要素をクリックすると何も起こりません。

誰かが私を助けてくれることを願っています。

HTML

$(document).ready(function() { 
 

 
    var test = $('#test'); 
 

 
    test.click(function() { 
 

 
    var html = document.createElement('div'); 
 
    html.className = 'temp'; 
 
    $('body').append(html); 
 
    console.log('clicked.'); 
 

 
    }); 
 

 
    test.on('click', '.temp', function() { 
 

 
    console.log('Temp div removed.'); 
 
    $(this).remove(); 
 

 
    }); 
 

 
});

#test { 
 
    width: 300px; 
 
    height: 75px; 
 
    background: #f00; 
 
    margin-bottom: 5px; 
 
} 
 

 
.temp { 
 
    width: 200px; 
 
    height: 50px; 
 
    background: #00f; 
 
    margin-bottom: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="test"></div>

Answer 1

あなたは、動的要素の親にイベントの委任を設定する必要があります。イベントは#test要素に限定されていますが、.temp divは本文の子です。イベントは本文に追加することも、追加したノードの専用コンテナに追加することもできます。答えを

$(document).ready(function() { 
 

 
    var test = $('#test'); 
 
    var target = $('#target'); 
 

 
    test.click(function() { 
 

 
    var html = document.createElement('div'); 
 
    html.className = 'temp'; 
 
    target.append(html); 
 
    console.log('clicked.'); 
 

 
    }); 
 

 
    target.on('click', '.temp', function() { 
 

 
    console.log('Temp div removed.'); 
 
    $(this).remove(); 
 

 
    }); 
 

 
});

#test { 
 
    width: 300px; 
 
    height: 75px; 
 
    background: #f00; 
 
    margin-bottom: 5px; 
 
} 
 

 
.temp { 
 
    width: 200px; 
 
    height: 50px; 
 
    background: #00f; 
 
    margin-bottom: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="test"></div> 
 
<div id="target"></div>