Django 中 Ajax 调用后 JQuery 可编辑选择

Question

我在 Django 项目中使用 JQuery 可编辑选择来使选择小部件可搜索。

当我使用 Ajax 调用另一个包含选择框的模板时，除非我使用：

，否则该脚本将不适用

$.getScript("https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js").then(() => {}

问题在于它使得 Ajax 的渲染非常缓慢且随机。

有没有办法将脚本缓存在父模板中并仅加载一次，以便我在渲染子模板时可以重用它？

这是我对父模板的 AJAX 调用：

                $.ajaxSetup(
                            {
                        data: {select_update_record_project_id: sales_documents_id ,
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                });
                $.ajax({
                    type: "GET",
                    url: "/my_url/",
                    cache: true, // I have tried both true and false
                    beforeSend: function(){ 
                        $('#div_master_sales_documents_edit').empty()
                        
                    },
                    success: function (data) {

                        $.getScript("https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js").then(() => {
                            $("#div_master_sales_documents_edit").html(data);
                        });
                    }
                });
            }

这是 Ajax 调用后呈现的我的子模板：

    <select id="sales_documents_editable_select_description_1"></select>
    <select id="sales_documents_editable_select_description_2"></select>
    <select id="sales_documents_editable_select_description_3"></select>
    
    
    
    <script>
// this is where you apply the editable-select to select widgets
    
         var list_selectbox_ids = ['sales_documents_editable_select_description_1','sales_documents_editable_select_description_2','sales_documents_editable_select_description_3'];
                
                for (let i = 0; i < list_selectbox_ids.length; i++) {
                    $('#' + list_selectbox_ids[i]).editableSelect({effects: 'fade'}).on('select.editable-select', function (e, li) {
                        populate_sales_documents_selected_product($('#' + list_selectbox_ids[i]).attr('id'), li.text(), li.val())
                    });
                }
    </script>

Answer 1

你可以使用class代替id。

<select class="eds" data-id="sales_documents_editable_select_description_1"></select>

<script>  
function rednerSelect(){  
$('.eds').each(function(){
   $(this).editableSelect({effects: 'fade'})
   .on('select.editable-select',
   function (e, li) { 
      populate_sales_documents_selected_product(
           $(this).attr('id'), li.text(), li.val())
      });
}); 
}   
</script>

然后在每个 ajax 调用上调用函数

rednerSelect();