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

我有一个带有子列表的列表和一个框。
每次更改选择框时，都需要使用新的
参数（选定值）。

我正在使用ajax获取新数据，然后删除列表，并将新元素（带有新数据的相同列表）注入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);
}

但是我在同一个.php文件中还有一个<script > ... </script>，我需要重新加载它，这样它才能与以下新列表一起工作：

我需要重新加载脚本并将其与新列表一起使用的脚本

<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封装在最终解决方案中。