通过jQuery .load加载后执行jQuery脚本

Question

In page Index.html there is a selectbox called #choose_content_to_load and a div called #get_loaded_content

<select id="choose_content_to_load">
<option>Some content from page content.html and div #content</option>
</select

<div id="get_loaded_content">

As seen in the selectbox option there is a page called content.html that contains a div called #content . In the current situation the div #content get loaded into #get_loaded_content when click on the option by using this script:

$(document).ready(function(){ 
$("#choose_content_to_load").change(function(){ 
    var selectedOption = $('#choose_content_to_load :selected').val(); 
    $containerDiv = $('#get_loaded_content'); 
    $containerDiv.html("");
       switch (selectedOption)
       {
        case "Some content from page content.html and div #content":$containerDiv.load( "content.html #content" , function(){$(document).trigger("reload_javascript");});break;
       }
    return true;
    }); 
});

As you see the script also trigger a "reload" of all the scripts "reload_javascript". This is becuse the div #content have some more design elements that needs to be executed at the load in. These scripts looks like this:

$(document).on("ready reload_javascript" ,function() {
script
});

This works fine and all the loaded elements initializes and works, this becuse Index.html and content.html share the same design scripts (same .js file) so the scripts just need to "run again" to work. Now to the problem, the div #content need to have a larger script that only execute when the div is being loaded into #get_loaded_content in Index.html . Its not good to have the script in the .js file that both index.html and content.html share becuse its alot of code.

So the new script need to be put direct into the #content html using tags and execute when this div is being loaded in.

First I thought the new script will run just by adding the reload_javascript but then I realised that dident execute the script just initialize it (I think). I hope somebody can help me with this and please have in mind that I try to learn jQuery (beginner at coding).

Thanks alot.

Answer 1

If i understand you correctly you are loading <script> tags into content and wish for it to execute? If so call this function i made a while back after insertion.

/**
*This function is supposed to execute script after script insertions
*/
function execute(){
    $('#content script').each(function() {
        var _script = document.createElement('script');
        _script.type = 'text/javascript';
        _script.setAttribute('async', 'true');
    /**
    *IEFIX (IE does not support .innerHTML on createElement)
    **/
        if(!_script.innerHTML){
        _script.text=$(this).html().replace('\\\\',"\\");
        }else{
        _script.innerHTML  = $(this).html().replace('\\\\',"\\");
        }
        document.body.appendChild(_script); 
    });
}