如何让 JS 框架自定义函数适用于动态添加的元素？答案

【问题标题】：How to make JS framework custom functions work for dynamically added elements?如何让 JS 框架自定义函数适用于动态添加的元素？
【发布时间】：2021-03-15 13:28:37
【问题描述】：

我正在使用@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 listener 代码如下所示（当用户选择一个选项时触发）：

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），并且生成的选项未正确处理。如何让 MDCSelect 代码在 AJAX 请求后运行？我也可以使用 PHP 动态添加选项，但我可以只使用 JS 吗？

【问题讨论】：

标签： javascript mdc-components

【解决方案1】：

通过在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

现在一切正常，但我很难过

【讨论】：