Question

我有一个包含子列表的列表和一个＆lt;选择＆GT;框。
每当我更改选择框时，我都需要使用新的绿色重新加载此列表参数（选定值）。

我正在使用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>我需要RELOAD它，所以它可以使用这个新列表：

我需要重新加载并使用Drag＆amp; Drop with new list

的脚本

<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之后无效我怎么能重新加载那段脚本？让它识别并使用新插入的列表吗？

Answer 1

这是用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应该封装在最终的解决方案中。

将脚本更新到注入DOM的新元素

我需要重新加载并使用Drag＆amp; Drop with new list

1 个答案: