javascript - 将脚本更新为注入(inject) DOM 的新元素

Question

我有一个包含子列表和一个 框的列表。每次更改选择框时，我都需要使用新的重新加载此列表参数(选定值)。 我使用ajax来获取新数据，然后删除列表，并将新元素(具有新数据的相同列表)注入(inject)到DOM中。 <script type="text/javascript"> $('#selectSemestres').change(function(obj){ var anoSemestre = $(this).val(); $.ajax({ type: 'GET', url: '{{ route('professor') }}', data: {anoSemestre: anoSemestre}, success: function(data){ var lista = $(data).find('#list-professores'); //Get only the new professor list and thier disciplines $('#list-professores').remove(); //Remove old list $('#professores').append(lista); //Append the new list where the old list was before. load_js(); $('.prof-disciplinas').sortable({ connectWith: '.prof-disciplinas'}); } }); });</script> 问题是:当你向 dom 中插入一个新元素时，你需要“重新加载”你的 JavaScript，以便它能够识别新元素。这就是我对 load_js() 所做的事情方法。 function load_js(){ var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type = 'text/javascript'; script.src = 'js/script.js'; head.appendChild(script);}但我还有另一个<script > ... </script>在同一个 .php 文件中，我需要重新加载它，以便它可以使用这个新列表:我需要重新加载脚本并使用拖放功能与新列表 <script type="text/javascript"> $(function(){ var oldTeacherId; $('.prof-disciplinas').sortable({ connectWith: '.prof-disciplinas', start: function (event, ui){ oldTeacherId = ui.item.parent().prev().prev().attr('data-id'); }, stop: function (event, ui){ $.ajax({ type: "POST", url: '{{ URL::to("/professor") }}', data: { disciplina: ui.item.attr('data-id'), professor: ui.item.parent().prev().prev().attr('data-id'), old: oldTeacherId }, success: function(data){ swal("Good job!", "You clicked the button!", "success"); //Atualizar tabela aqui var evento = $('#calendario').fullCalendar('clientEvents', function(event){ return event.id == $(ui.item).attr('data-id'); }); evento[0].backgroundColor = '' + getCor( ui.item.parent().prev().prev().attr('data-id')); $('#calendario').fullCalendar('updateEvent', evento[0]); }, error: function(){ } }); } }); });</script> 这个拖放效果在ajax后不起作用。我如何重新加载那段脚本？让它识别并使用新插入的列表？ 最佳答案 这是在 JavaScript 中实现目标的完全错误的方式。让我们从第一个例子开始: $('#selectSemestres').change(function(obj){...})可以替换为: $('body').on('change', '#selectSemestres', function(obj){...}) http://api.jquery.com/on/ 至于你的第二段代码，你可以将其提取到一个单独的函数中，并在每次需要重新加载数据时调用它: var oldTeacherId;function reloadTeachers() { $('.prof-disciplinas').sortable({ connectWith: '.prof-disciplinas', start: function(event, ui) { oldTeacherId = ui.item.parent().prev().prev().attr('data-id'); }, stop: function(event, ui) { $.ajax({ type: "POST", url: '{{ URL::to("/professor") }}', data: { disciplina: ui.item.attr('data-id'), professor: ui.item.parent().prev().prev().attr('data-id'), old: oldTeacherId }, success: function(data) { swal("Good job!", "You clicked the button!", "success"); //Atualizar tabela aqui var evento = $('#calendario').fullCalendar('clientEvents', function(event) { return event.id == $(ui.item).attr('data-id'); }); evento[0].backgroundColor = '' + getCor(ui.item.parent().prev().prev().attr('data-id')); $('#calendario').fullCalendar('updateEvent', evento[0]); }, error: function() { } }); } });}$(function() { reloadTeachers(oldTeacherId);});请注意，使用全局变量是一种不好的做法，oldTeacherId 应该封装在最终的解决方案中。 关于javascript - 将脚本更新为注入(inject) DOM 的新元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40831305/ 上一篇：javascript - 单击按钮重新加载部分页面，使用新 URL 刷新整个页面 下一篇：javascript - Jquery UI 1.12 无法设置未定义的属性 '_renderItem' 相关文章： javascript - 从对 jQuery 的 AJAX 调用中检索多个变量 javascript - 推特 REST API : Bad Authentication data javascript - discord.js 随机图像显示不正确 javascript - JS中的API获取数据 jquery - 选择的 rails gem 不工作 javascript - 用 Ajax 替换 Iframe javascript - 将函数重构为对象方法 javascript - jQuery 文本返回 NULL jquery - Jquery插件.Net的成功回调在哪里 python - python中的奇怪格式数据是什么？ ©2023 IT工具网  联系我们