如何执行脚本从Jquery加载时，只有一个div id被选中

Question

这个问题和别人问的不一样。我有一个名为page_1的页面，当点击链接时，它只从page_2加载信息到page_1。但是它只加载特定div中的信息，而不重新加载页面。有时，该信息包含必须执行的JavaScript，但使用jquery加载，div中的信息被加载，但JavaScript不执行。

Page_1.php

<a href="page_2.php" rel="charger_partiel" data-direction="id_du_milieu" data-ajax_id_to_update="id_du_milieu_2" data-afficher_espace_de_chargement="Oui" data-id_image_de_chargement_devant_lien="devant_charger_partiel">charger_partiel <span id='devant_charger_partiel'></span> </a><br><br>
<div id="id_du_milieu_2">Le text affiche par defaut</div>
<script>
$(document).on('click', 'a[rel*=charger_partiel]', function(f) { 
f.preventDefault();

var myId_to_update_here = $(this).data('ajax_id_to_update');    
var myId_to_load_from_other_page = $(this).data('direction');       

var afficher_chargement = $(this).data('afficher_espace_de_chargement');

var id_chargement_devant_lien_partiel= $(this).data('id_image_de_chargement_devant_lien');

var pageURL=$(this).attr('href');


history.pushState(null, '', pageURL);


var image_de_chargement = '<img src="images/facebook_style_loader.gif" />';

var preloader_comme_facebook_et_youtube = image_de_chargement ;     

if(id_chargement_devant_lien_partiel!='')
{
$('#'+id_chargement_devant_lien_partiel).html(image_de_chargement);
}



if(afficher_chargement=='Oui')
{
$('#'+myId_to_update_here).html(preloader_comme_facebook_et_youtube);
}


$('#'+myId_to_update_here).load($(this).attr('href')+' #'+myId_to_load_from_other_page, 

function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#'+myId_to_update_here).html('<p>Oupps.. There was an error making the AJAX request. Maybe your internet connection is slowing down.</p>');
}


});

//Apres le chargement, on enleve le loading
if(id_chargement_devant_lien_partiel!='')
{
$('#'+id_chargement_devant_lien_partiel).html('');
}
//Fin de l'affichage du chargement si l'id du span du devant lien est mis

return false;
});
</script>

Page_2.php

<h3 id="id_du_milieu">
Anything from here should be loaded
<div id="id_de_test">id_de_test</div>

<div id="id_de_gloire">id_de_gloire </div>
<script> alert('This is a test that should be executed'); </script>
And it ends here 
</h3>
<h1>This should not be loaded</h1>
<script> alert('This also should not be executed'); </script>

使用<h3 id="id_du_milieu">从另一个页面加载信息，但是它不执行javascript警报。

如何只执行位于另一页(本例中为id="id_du_milieu")所选id之间的脚本?

Answer 1

尝试如下:

var script = $('#id_du_milieu script').text().
eval(script);

插入到源代码段:

$('#' + myId_to_update_here).load($(this).attr('href') + ' #' + myId_to_load_from_other_page,
function (responseText, textStatus, XMLHttpRequest) {
if (textStatus == 'error') {
$('#' + myId_to_update_here).html('<p>Oupps.. There was an error making the AJAX request. Maybe your internet connection is slowing down.</p>');
}
else {
var script = $('#id_du_milieu script').text();
eval(script);
}
}); 

Answer 2

考虑创建自己的Load，它可以处理生成的HTML的Script部分。

// **Snippet is just an Example and will not execute due to CORS**
$.fn.myLoad = function(url, target, callback) {
var htm;
var script = $("<script>");
$.get(url, function(results) {
if (target != undefined) {
// Load the entire page and seek out the target
htm = $(results).find(target).html();
} else {
htm = results;
}
// Seek for Script in the HTML, if more than 1, this can fail
script.append($(htm).find("script").html());
// Strip it from HTML
$(htm).find("script").remove();
});
$(this).append(htm);
$(this).append(script);
if (callback != undefined) {
script.ready(callback);
}
}
$(function() {
$("#results").myLoad("https://example.com", "body");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>

在这里进一步讨论:https://blog.kevinchisholm.com/javascript/jquery-getscript-alternatives/