向網格的每個單元添加一個偵聽器

Question

我用下面的HTML代碼創建了一個網格，我想知道是否有可能使用jQuery將偵聽器添加到網格的每個單元。通過繪製一個包含水平線和垂直線的盒子來繪製網格，從而形成單個盒子。所以目前每個單元不是一個單獨的元素。我想爲每個單元添加一個偵聽器（或者可以區分這些單元的偵聽器），這樣當我單擊某個單元格時，就會發生特定於該單元格的某些事件。

這是可能與我目前的設置？或者我可能需要改變我創建網格的方式來實現這一點嗎？

<div class="grid-window" style="overflow: visible; top: 24px; left: 24px; right: 0px; bottom: 0px; height: 225px; width: 215px;"> 
    <div class="grid" style="height: 225px; width: 215px;"> 
    <div class="gridlines"> 
     <div class="vline" style="height: 225px; left: 0px;"></div> 
     <div class="vline" style="height: 225px; left: 30.571428571428573px;"></div> 
     <div class="vline" style="height: 225px; left: 61.142857142857146px;"></div> 
     <div class="vline" style="height: 225px; left: 91.71428571428572px;"></div> 
     <div class="vline" style="height: 225px; left: 122.28571428571429px;"></div> 
     <div class="vline" style="height: 225px; left: 152.85714285714286px;"></div> 
     <div class="vline" style="height: 225px; left: 183.42857142857144px;"></div> 
     <div class="hline" style="width: 100%; top: 0px;"></div> 
     <div class="hline" style="width: 100%; top: 16px;"></div> 
     <div class="hline" style="width: 100%; top: 32px;"></div> 
     <div class="hline" style="width: 100%; top: 48px;"></div> 
     <div class="hline" style="width: 100%; top: 64px;"></div> 
     <div class="hline" style="width: 100%; top: 80px;"></div> 
     <div class="hline" style="width: 100%; top: 96px;"></div> 
     <div class="hline" style="width: 100%; top: 112px;"></div> 
     <div class="hline" style="width: 100%; top: 128px;"></div> 
     <div class="hline" style="width: 100%; top: 144px;"></div> 
     <div class="hline" style="width: 100%; top: 160px;"></div> 
     <div class="hline" style="width: 100%; top: 176px;"></div> 
     <div class="hline" style="width: 100%; top: 192px;"></div> 
     <div class="hline" style="width: 100%; top: 208px;"></div> 
     <div class="hline" style="width: 100%; top: 224px;"></div> 
    </div> 
    </div> 
</div>