無法點擊Google MDL表格中的複選框動態生成

我有以下JavaScript加載與讀取JSON數據集生成的行的表。無法點擊Google MDL表格中的複選框動態生成

<script type="text/javascript"> 
    $(document).ready(function() { 

     $.getJSON('/GetQueue.ashx') 
      .done(function (data) { 
       var tbl = $('#queueBody'); 

       data.forEach(function (i) { 
        var tblRow = $("<tr>"); 

        var tdCheck = $("<td>"); 
        var tdCheckLabel = $('<label>'); 
        var tdCheckBox = $('<input>'); 
        var spanFocusHelper = $('<span>'); 
        var spanBoxOutline = $('<span>'); 
        var spantickOutline = $('<span>'); 
        var spanRippleContainer = $('<span>'); 
        var spanRipple = $('<span>'); 

        // mdl-checkbox__box-outline 
        tdCheckLabel.addClass('mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded'); 
        tdCheckLabel.attr('data-upgraded', ',MaterialCheckbox,MaterialRipple'); 

        tdCheckBox.addClass('mdl-checkbox__input'); 
        tdCheckBox.attr('type', 'checkbox'); 

        spanFocusHelper.addClass('mdl-checkbox__focus-helper'); 
        spanBoxOutline.addClass('mdl-checkbox__box-outline'); 
        spantickOutline.addClass('mdl-checkbox__tick-outline'); 

        spanRippleContainer.addClass('mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center"'); 
        spanRippleContainer.attr('data-upgraded', ',MaterialRipple'); 

        spanRipple.addClass('mdl-ripple'); 

        tdCheckBox.appendTo(tdCheckLabel); 
        spanFocusHelper.appendTo(tdCheckLabel); 
        spanBoxOutline.appendTo(tdCheckLabel); 
        spanRippleContainer.appendTo(tdCheckLabel); 

        spanRipple.appendTo(spanRippleContainer); 
        spantickOutline.appendTo(spanBoxOutline); 

        tdCheck.append(tdCheckLabel); 

        tblRow.append(tdCheck); 
        // now add all the other columns 
        tblRow.append("<td class='mdl-data-table__cell--non-numeric'>" + i.Manifest + '</td>'); 
        tblRow.append("<td class='mdl-data-table__cell--non-numeric'>" + i.PatientNumber + '</td>'); 
        tblRow.append("<td class='mdl-data-table__cell--non-numeric'>" + i.Filename + '</td>'); 
        tblRow.append("<td class='mdl-data-table__cell--non-numeric'>" + i.PracticeName + '</td>'); 
        tblRow.append("<td class='mdl-data-table__cell--non-numeric'>" + i.MessageSource + '</td>'); 
        tblRow.appendTo(tbl); 
        // $('#queueHolder').append('<p>' + i.Filename + '</p>'); 
       }); 

       componentHandler.upgradeDom(); 
      }); 
    }); 
</script>

以下是由JavaScript的

<td> 
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox,MaterialRipple"> 
     <input class="mdl-checkbox__input" type="checkbox"> 
     <span class="mdl-checkbox__focus-helper"></span> 
     <span class="mdl-checkbox__box-outline"> 
      <span class="mdl-checkbox__tick-outline"></span> 
     </span> 
     <span class='mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center"' data-upgraded=",MaterialRipple"> 
       <span class="mdl-ripple"><span> 
     </span> 
    </label> 
</td> 
<td class="mdl-data-table__cell--non-numeric">228471</td> 
<td class="mdl-data-table__cell--non-numeric">2610759</td> 
<td class="mdl-data-table__cell--non-numeric">261075963308592015-12-11 144533</td> 
<td class="mdl-data-table__cell--non-numeric">HOLBROOK SURGERY</td> 
<td class="mdl-data-table__cell--non-numeric">INPATIENT</td> 
</tr>

但是當我點擊複選框生成的HTML的一個樣本 - 什麼也沒有發生。

但是，如果表格行不是動態生成的，而是存在於頁面的源代碼中 - 那麼可以單擊它。

那麼如何讓動態生成的數據可點擊。

我已經試過

componentHandler.upgradeDom();

，但這似乎並沒有作出任何區別。

來源

2015-12-21 Paul S Chapman

'componentHandler.upgradeDom（）;'你有什麼？ – Jai

沒有什麼是整條線。 –

使用JQuery和mdl CSS庫似乎存在一個問題。在創建對象時使用香草JavaScript似乎可以解決這個問題。

來源

2016-02-25 17:01:20

無法點擊Google MDL表格中的複選框動態生成

回答

相關問題