如何解决如何让 JS 框架自定义函数对动态添加的元素起作用?
我正在使用@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>')
}
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 吗?
解决方法
通过将 PHP 脚本包含到 admin.blade.php
(Laravel) 中解决:
@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
现在一切正常,但我感到难过
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。