Shadowroot : Attaching jquery event handlers to multiple elements under shadowRoot

So I’m using a jQuery plugin under shadowRoot in my app. The HTML is as follows

#shadow-root
<div id="container">
   <div class="display-item">Item 1</div>
   <div class="display-item">Item 2</div>
   <div class="display-item">Item 3</div>
   <div class="display-item">Item 4</div>
</div>

I want to attach event listeners to the divs with class = “display-item” for events like mousedown,mousedown,focus. I tried the following:

let root = document.getElementById(divID).shadowRoot;
$(root).on('mousedown', '#container div.display-item', function(event) {
//function 
});

But this doesn’t work. How could I make this work?