Question

在Index.html页面中，有一个名为#choose_content_to_load的选择框和一个名为#get_loaded_content的div

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

<div id="get_loaded_content">

如selectbox选项中所示，有一个名为content.html的页面，其中包含一个名为#content的div。在当前情况下，当使用此脚本单击该选项时，div #content会加载到#get_loaded_content中：

$(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;
    }); 
});

如您所见，该脚本还会触发所有脚本“reload_javascript”的“重新加载”。这是因为div #content有一些需要在加载时执行的设计元素。这些脚本如下所示：

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

这很好用，所有加载的元素都初始化和工作，这个问题Index.html和content.html共享相同的设计脚本（相同的.js文件），所以脚本只需要“再次运行”到工作。现在解决这个问题，div #content需要有一个更大的脚本，只有在将div加载到#get_loaded_content中的Index.html时才会执行。将index.html和content.html共享的脚本放在.js文件中并不是很好用。

所以新脚本需要直接放入#content html使用标签，并在加载此div时执行。

首先我认为新脚本只是通过添加reload_javascript来运行，但后来我意识到dident执行脚本只是初始化它（我认为）。我希望有人可以帮助我，请记住我尝试学习jQuery（编码初学者）。

非常感谢。

Answer 1

如果我理解正确，您正在将<script>标记加载到内容中并希望它能够执行？如果是这样，请在插入后调用此功能。

/**
*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); 
    });
}

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

1 个答案: