MDLモーダルボタンは1枚のカードで動作しますが、他のカードでは動作しません

Question

これはヒスイで書かれたページです。それは、イベントの各値（変数）ごとにカードを生成します。意図は、イベント情報を表示するために使用される各カードのモーダルを作成することです。モーダルボタンは、最初のカードで機能します。しかし、残りのカードでは機能しません。

.mdl-grid 
    each val in pdfs 
     .mdl-cell.mdl-cell--4-col.mdl-cell--4-offset 
      .demo-card-square.mdl-card.mdl-shadow--2dp 
       .mdl-card__title 
        h2.mdl-card__title-text #{val.title} 
       .mdl-card__supporting-text 
        | #{val.desc} 
       .mdl-card__actions.mdl-card--border 
        a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect(href="/uploads/"+'#{val.filename}',id='embedUrl' target="_blank") 
         | View Event 
        button.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect.mdl-button.show-modal(type='button') 
         | Review 
        // Icon button 
        a.mdl-button.mdl-js-button.mdl-button--icon.mdl-button-color--red 
         i.material-icons close 

        dialog.Viewabstractmodal.mdl-dialog 
         .mdl-dialog__content 

         .mdl-dialog__actions.mdl-dialog__actions 
          button.mdl-button.close.mdl-button--colored(type='button') Submit 
script. 
    var dialog = document.querySelector('dialog'); 
    var showModalButton = document.querySelector('.show-modal'); 
    if (! dialog.showModal) { 
     dialogPolyfill.registerDialog(dialog); 
    } 
    showModalButton.addEventListener('click', function() { 
     dialog.showModal(); 
    }); 
    dialog.querySelector('.close').addEventListener('click', function() { 
     dialog.close(); 
    }); 

Answer 1

最初のイベントだけでなく、各ダイアログにイベントリスナーを割り当てる必要があります。

// get ALL of the dialogs 
var dialogs = document.querySelectorAll('.dialog'); 

// iterate and add listeners to each dialog 
dialogs.forEach(function(dialog){ 
    // ... polyfill 

    // use querySelector method of dialog, not the whole document 
    var showModalButton = dialog.querySelector('.show-modal'); 

    showModalButton.addEventListener('click', function() { 
     dialog.showModal(); 
    }); 
    dialog.querySelector('.close').addEventListener('click', function() { 
     dialog.close(); 
    }); 
})