jquery動的生成コントロールバインドイベントの無効な解決方法

1つのコントロールをクリックして新しいコントロールを追加します.削除コントロールがあります.削除コントロールをクリックして新しいコントロールを削除しますが、設定されたクリックイベントはトリガーされません.
動的新規コントロール:

    $('#add-record').on('click', function () {
        $('.detail-items').append('
' +
            '    
 '+
            '       
    
' +
            '       
'+
            '            '+
            '       
' +
            '    
' +
            '    
  
' +
            '
');
    });

クラスdelete-itemバインドのクリックイベント:

    $('.delete-item').on('click', function () {
        $.alert('  ','  ');
    });

「削除」をクリックしても反応しません!
この問題の重要な原因は,動的に生成された要素がイベント委任によって処理されることである.
私たちは事件の依頼によって問題を解決します.

    $(document).on("click", ".delete-item", function (e) {
        $.alert('hhhh', "  ");
    });

この方法はブロガーの解決方法を参考にした.https://www.cnblogs.com/nelly0213/p/6183661.html