[英]How to make JS framework custom functions work for dynamically added elements?
我正在使用@material/select。 AJAX 調用后從 JS 腳本添加選項:(簡化代碼)
for (let key in data.directories){
$("#selector-options").append('<li data-value="'+data.directories[key]+'" role="option">\n' +
' <span>'+data.directories[key]+'</span>\n' +
' </li>')
}
Material 監聽器代碼如下所示(當用戶選擇一個選項時觸發):
import {MDCSelect} from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change', () => {
alert(`Selected option at index ${select.selectedIndex} with value "${select.value}"`);
});
我要做的是在用戶選擇選項時發出 AJAX 請求,但 MDCSelect 代碼在 AJAX 請求(獲取data
)之前運行,並且生成的選項未正確處理。 如何在 AJAX 請求之后運行 MDCSelect 代碼? 我也可以使用 PHP 動態添加選項,但我可以只使用 JS 來實現嗎?
通過在admin.blade.php
(Laravel) 中包含一個 PHP 腳本來解決:
@for ($i=0;$i<count($directories);$i++)
<li class="mdc-list-item" aria-selected="false" data-value="{{$directories[$i]}}" role="option">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">{{$directories[$i]}}</span>
</li>
@endfor
現在一切正常,但我感到難過
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.