동적으로 추가 된 자바 스크립트가 실행되지 않습니다.

Question

저는 아약스를 많이 사용하는 웹 사이트를 만들고 있습니다. 내 JS 중 일부는 내가 아약스를 통해로드하는 페이지의 일부로 제공됩니다. 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 파일의 함수를 호출합니다. admin JS 파일이 새 기능을 인식하지 못하기 때문에 함수가 실행되지 않습니다.

동적으로 추가되는 JS 파일은 다른 HTML 코드의 스크립트 태그 부분입니다. 동적으로 추가 된 코드의 예입니다. 내가 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 .

Answer 1

는 다음 스크립트를 시도,이로드 된 HTML에서 스크립트를 제거하고 콘텐츠를 추가하기 전에 페이지로에로드합니다. 또한 동일한 자바 스크립트 파일이 여러 번 추가되지 않도록합니다.

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/