Regex'i temel alarak JavaScript olayını davet edin

Question

Ön kısımda Saf CSS kullanıyorum bir Django App yazıyorum. App arama ve gönderme düğmesi için basit bir metin kutusuna sahiptir. Kullanıcı herhangi bir sorguyu yazıp gönder düğmesine basıldığında, eşleşen girişlerin tablosu gösterilecektir. Tablodaki her giriş için bir bayrak düğmesi vardır. Kullanıcı bayrak düğmesini tıkladığında, kullanıcının sonuçları doğru veya yanlış olarak işaretlemesini isteyen bir mod oluşturulur. Şimdi, modal almak için bootstrap modal kullanıyorum. Düğme eklemek için lütfen aşağıdaki kodu bulun.

<div id="content2" style="min-height:400px"> 
     <div class="pure-u-24-19"> 
     <table class="pure-table pure-table-bordered" id="myTable"> 
      <table class="pure-table"> 
       <thead> 
        <tr> 
         <th>id</th> 
         <th>index</th> 
         <th>product_id</th> 
         <th>long_desc_html</th> 
         <th>seller_thumb_url</th> 
         <th>resource_types</th> 
         <th>content_type</th> 
         <th>long_desc</th> 
         <th>title</th> 
         <th>greads_review_url</th> 
         <th>url</th> 
         <th>edm_score</th> 
         <th>avg_rating</th> 
         <th>creation_date</th> 
        </tr> 
       </thead> 

       <tbody> 
       {% if data.count > 0 %} 
       {% for dist in data %} 
        <tr class="pure-table-odd"> 
         <td>"{{ dist.object.id }}"</td> 
         <td>"{{ dist.object.index }}"</td> 
         <td>"{{ dist.object.product_id }}"</td> 
         <td>"{{ dist.object.long_desc_html }}"</td> 
         <td>"{{ dist.object.seller_thumb_url }}"</td> 
         <td>"{{ dist.object.resource_types }}"</td> 
         <td>"{{ dist.object.content_type }}"</td> 
         <td>"{{ dist.object.long_desc }}"</td> 
         <td>"{{ dist.object.title }}"</td> 
         <td>"{{ dist.object.greads_review_url }}"</td> 
         <td>"{{ dist.object.url }}"</td> 
         <td>"{{ dist.object.edm_score }}"</td> 
         <td>"{{ dist.object.avg_rating }}"</td> 
         <td>"{{ dist.object.creation_date }}"</td> 
         <td> <button id="{{ dist.object.id }}" type="button" class="pure-button-primary pure-button" data-toggle="modal" data-target="#myModal"> Flag </button> </td> 
        </tr> 
       {% endfor %} 


       {% else %} 

       <li>None to show!</li> 

       {% endif %} 
       </tbody> 
      </table> 
     </div> 
     </table> 
     </div> 
    </div> 

ben "id" = object.id (Temel olarak asssign olacak id = {1,2,3 ... n}) ile bir düğme oluşturma. Şimdi, ilgili buton tıklaması için modal oluşturacak bir javascript tetiklemek istiyorum. Genelleştirilmiş bir java script işlevi (Regex kullanarak çağrılabilir olan işlev) yazabilmem için herhangi bir yol var mı, böylece hangi düğmeyi Modal'ı tetiklediğimi anlayabileceğim.

Teşekkür

Answer 1

Olay işleyicisi en target olayı gündeme referanslı bir olay nesnesini almak - "tıklama" Bu dom öğesidir için. Bu^modern bir tarayıcı + jquery varsaymaktadır:

$('table button').each((i,e)=>{ 
    e.addEventListener(
     'click', 
     (e)=>{ 
      console.log('clicked', e.target.getAttribute('id')); 
     } 
    ) 
}) 

Not: Aşağıda (denenmemiş) koduna bakınız. Bunu sınamak için, 'tablo' düğmesini 'div' olarak değiştirin ve konsolunuza yapıştırın ve bu sayfadaki herhangi bir div öğesine tıklayın

Yeniden incelemek için, tıklanarak neyin tıklandığını (normal ifade olmadan) alırsınız. Olay nesnesinin target özelliği.

Javascript olay sistemine aşina değilseniz, yukarıdaki koddan daha zarif olur. Boş zamanlarınızda event bubbling'un özelliklerini kontrol etmenizi tavsiye ediyorum.