Dynamicly добавил javascript не работает

Question

Я строю сайт, который сильно построен на ajax. Некоторые из моих JS входят как часть страниц, которые я загружаю через ajax. Функции из JS нельзя вызывать из других сценариев JS, которые были загружены ранее. Как я понял, это связано с тем, что код не был действительно объявлен и что я могу использовать eval() для кода. Но это похоже на трату ресурсов, поскольку код работает и работает так, что ему не нужно работать с уже объявленным кодом.

Мой маленький короткий загрузчик страницы ajax.

$(document).ready(function(){ 
    var old = "home" 
    $("#topMenu a").on("click",function(){ 
     if(typeof edit_menu !== 'undefined' && edit_menu){ 
      return; 
     } 
     var link = $(this).attr("data-link"); 
     //Load Ajax 
     LoadPage(link, old); 
    }); 
}); 

function LoadPage(link, old){ 
    $.ajax({ 
     url: "pages/" + link + ".php", 
    }).done(function(data){ 
     $("#content").html(data); 
    }); 
    Hide(); 
    history.pushState(old,null,"?page=" + link); 
} 

Если я вхожу в систему как администратор, у меня также будет файл JS администратора, загруженный как часть DOM. Сценарий вызывает функцию в другом JS-файле, который загружается динамически. Функция не запускается, потому что JS-файл администратора не знает о новой функции.

Динамически добавленный JS-файл является частью тега скрипта другого HTML-кода. Пример динамически добавленного кода.

<script src="/javascript/projects.js"></script> 
    <header>Projects</header> 

<article> 
    <h1>First project</h1> 
    <section class="summary"> 
Lorem ipsum is da shit 
    </section> 
    <section class="text"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam orci, hendrerit a justo sit amet, egestas ullamcorper orci. Aliquam quis facilisis urna. Fusce blandit pellentesque elit. Vivamus ullamcorper luctus felis in rutrum. Nam quis facilisis mauris. Nunc iaculis sagittis sollicitudin. Ut imperdiet, purus et fermentum tempor, leo mauris feugiat libero, eu pulvinar odio felis sed tortor. Mauris vel libero orci. Suspendisse a mollis turpis. Maecenas egestas felis eget ultrices porta. Nulla non metus ut augue faucibus ultrices. Phasellus arcu magna, vulputate eget sollicitudin a, ullamcorper a ipsum. Suspendisse potenti. Pellentesque eget vulputate ipsum.</p>    <p>Ut ultricies faucibus sapien, ut sodales turpis rhoncus molestie. Vivamus luctus auctor pellentesque. Phasellus ut ex vulputate, congue felis nec, pharetra odio. Ut ligula ante, luctus nec enim ac, lobortis ultrices elit. Quisque sed justo a nibh congue tempor sit amet ut mauris. In non enim nulla. Nulla et dolor sollicitudin, finibus ante eu, egestas purus. Phasellus sit amet eros dignissim, pellentesque elit tempor, sagittis eros. Donec sollicitudin velit ipsum, semper ultrices sapien blandit non. Phasellus vehicula orci in ipsum blandit hendrerit. Vestibulum facilisis dolor ac tincidunt fermentum.</p> 
    </section> 
    <span>Update text</span> <input type="checkbox" class="update_projects" data-id="First project" /><br /><button class="update_text">Update</button><input type="hidden" class="token" value="4926dd431992894a8364ca4d89733038be0cb0ec4897eb2a417637685554b6df40149522a858b5bfaaa91526b84718cdd54b301229371841dc2f022bbd0f804eaf31abb51caef55b26cca3209cc3b0838f194176f78f0931b2217669cd2912faa25a3c3e469ce686d79ac7a7852fbfee9d6d4dc5da18b499e703b4ef57fc88c1a99ccf8943af5853433f911ce276ff13e9ecbfb074d747f1a07f26c141f80383a149902dfe7469262724e2f67aae48d9919d486855a892b17681660ab3e0d25f98e714c3d98cc903" /><input type="hidden" class="id" value="1" /><br /><input type="text" name="tag" class="tag" value="php" /> 
</article><article> 
    <h1>Secons project</h1> 
    <section class="summary"> 
And I'm not lying 
    </section> 
    <section class="text"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam orci, hendrerit a justo sit amet, egestas ullamcorper orci. Aliquam quis facilisis urna. Fusce blandit pellentesque elit. Vivamus ullamcorper luctus felis in rutrum. Nam quis facilisis mauris. Nunc iaculis sagittis sollicitudin. Ut imperdiet, purus et fermentum tempor, leo mauris feugiat libero, eu pulvinar odio felis sed tortor. Mauris vel libero orci. Suspendisse a mollis turpis. Maecenas egestas felis eget ultrices porta. Nulla non metus ut augue faucibus ultrices. Phasellus arcu magna, vulputate eget sollicitudin a, ullamcorper a ipsum. Suspendisse potenti. Pellentesque eget vulputate ipsum.</p> 
      <p>Ut ultricies faucibus sapien, ut sodales turpis rhoncus molestie. Vivamus luctus auctor pellentesque. Phasellus ut ex vulputate, congue felis nec, pharetra odio. Ut ligula ante, luctus nec enim ac, lobortis ultrices elit. Quisque sed justo a nibh congue tempor sit amet ut mauris. In non enim nulla. Nulla et dolor sollicitudin, finibus ante eu, egestas purus. Phasellus sit amet eros dignissim, pellentesque elit tempor, sagittis eros. Donec sollicitudin velit ipsum, semper ultrices sapien blandit non. Phasellus vehicula orci in ipsum blandit hendrerit. Vestibulum facilisis dolor ac tincidunt fermentum.</p> 
    </section> 
    <span>Update text</span> <input type="checkbox" class="update_projects" data-id="Secons project" /><br /><button class="update_text">Update</button><input type="hidden" class="token" value="4926dd431992894a8364ca4d89733038be0cb0ec4897eb2a417637685554b6df40149522a858b5bfaaa91526b84718cdd54b301229371841dc2f022bbd0f804eaf31abb51caef55b26cca3209cc3b0838f194176f78f0931b2217669cd2912faa25a3c3e469ce686d79ac7a7852fbfee9d6d4dc5da18b499e703b4ef57fc88c1a99ccf8943af5853433f911ce276ff13e9ecbfb074d747f1a07f26c141f80383a149902dfe7469262724e2f67aae48d9919d486855a892b17681660ab3e0d25f98e714c3d98cc903" /><input type="hidden" class="id" value="2" /><br /><input type="text" name="tag" class="tag" value="" /> 
</article></section> 

UPDATE После некоторого более тестирования я обнаружил, что JS не может найти какой-либо из моей добавленной HTML в то время как JS добавили в том же время может.

Answer 1

Попробуйте следующий сценарий, это будет удалить скрипт из загруженного HTML и загрузить их на страницу, прежде чем добавлять содержимое. Также он гарантирует, что один и тот же файл javascript не будет добавляться несколько раз.

function LoadPage(link, old){ 
    $.ajax({ 
     url: "pages/" + link + ".php", 
    }).done(function(data){ 
     $loadedData = $("<div>"+data+"</div>"); 
     $loadedData.find('script[src]').each(function(i,v){ 
      var jsPath = $(this).attr('src'); 
      if($('[src="'+jsPath+'"]').length == 0){ 
       var tag = document.createElement('script'); 
       tag.src = jsPath; 
       var firstScriptTag = document.getElementsByTagName('script')[0]; 
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
      } 
     }); 
     $loadedData.find('script[src]').remove(); 
     $("#content").html($loadedData.html()); 
    }); 
    Hide(); 
    history.pushState(old,null,"?page=" + link); 
} 

Answer 2

Чтобы загрузить скрипт, который вы должны добавить его в качестве HTML-элемента, например:

}).done(function(data) { 
    var el = $(document.createElement('div')).html(data); 
    var scripts = el.find('script'); 

    for(var i = 0; i < scripts.length; i++) { 
     window.eval(scripts[i].innerHTML); 
     scripts[i].remove(); 
    } 

    $('#content').html(el.html()); 
}); 

Answer 3

Я пытаюсь понять вопрос но я не могу комментировать на данный момент некоторые его части не знаю, я работаю с jsfiddle, если это может помочь, можно ли сделать небольшой пример не весь код, чтобы помочь мне понять, что происходит. Начиная с эту функцию, например:

function LoadPage(link, old){ 
    $.ajax({ 
     url: "pages/" + link + ".php", 
    }).done(function(data){ 
     $("#content").html(data); 
    }); 
    Hide(); 
    history.pushState(old,null,"?page=" + link); 
} 

https://jsfiddle.net/3z62n8c2/