I have a little problem which is the following:

I have a button which allows to generate html code, example:

               $( "#addBlockArray" ).click(function() {
     
       let idunique =  Math.floor(Math.random() * 100000);
     
           let array = 
           '\
           <divSpecialSelected class="selectedbloccss"  id= ' + idunique + '> edit\
           <table class="table table-hover" contenteditable="true"> \
       <thead>\
         <tr>\
           <th scope="col">#</th>\
           <th scope="col">First</th>\
           <th scope="col">Last</th>\
           <th scope="col">Handle</th>\
         </tr>\
       </thead>\
       <tbody>\
         <tr>\
           <th scope="row">1</th>\
           <td>Mark</td>\
           <td>Otto</td>\
           <td>@mdo</td>\
         </tr>\
         <tr>\
           <th scope="row">2</th>\
           <td>Jacob</td>\
           <td>Thornton</td>\
           <td>@fat</td>\
         </tr>\
         <tr>\
           <th scope="row">3</th>\
           <td colspan="2">Larry the Bird</td>\
           <td>@twitter</td>\
         </tr>\
       </tbody>\
     </table>\
     </divSpecialSelected>\
           '
     
           $( "#blocArray" ).append( array);
     
     
     });

However, when this code is generated, I am unable to use selectors to do actions on it

$("divSpecialSelected").on('click', function () { // that dont work, he dont find this selector
console.log("aaa");
document.getElementById(this.id).addEventListener('mousedown', mouseDown, false);
localStorage.setItem('id', this.id);
window.addEventListener('mouseup', mouseUp, false);

});

I think because it is not in the DOM loaded at the start. But how could I get around this problem?