在ajax页面加载内容之后加载jquery插件js

Question

Foe Example, I have page that use select2 plugin:

function Initialize()
{
    if($('.su-tech').length) {
            $('.su-tech').select2({
                allowClear: true,
                width: '100%'
            });
    }
} 

and html code like this:

<select class="select2 su-tech" style="width:100%;">                                                    
    <option value="1" >option1</option>
    <option value="2" >option2</option>
    <option value="3" >option3</option>
</select>

also I use ajax to load html content with jQuery:

    $(document).on("click", "#page1", function () {
        $.ajax({
            type: 'POST',
            url: "/example-page1",
            success: function (result) {
                $('.ajax_content').html(result);
                Initialize()
            },
        })
    })

Now I want to load js and css each jquery plugin dynamically:

<link rel="stylesheet" href="assets/vendors/select2/css/select2.min.css">

<script type="text/javascript" src="assets/vendors/select2/js/select2.min.js"></script>

Answer 1

Try this

//Declare a script with id
<script type="text/javascript" id="pluginJS"></script>
$(document).ready(function () {
    $("#pluginJS").attr("src", "pluginJS.js");

    $("#pluginJS").load(function () {
        $("#otherJS").attr("src", "other-plugin.js");
    });
})

Call after Ajax Success

 $(document).on("click", "#page1", function () {
        $.ajax({
            type: 'POST',
            url: "/example-page1",
            success: function (result) {
                $('.ajax_content').html(result);

                //you can call JS Here
                $("#pluginJS").attr("src", "pluginJS.js");
                $("#pluginJS").load(function () {
                         //After Load PluginJS you can use jQuery
                         Initialize();
                });
            },
        })
})