Выполнение javascript через ajax

Question

У меня есть php-файл, который эхо-код HTML с элементом <script>. как это:

<div> 
    <button onclick="FunctionName();">Click Me</button> 
</div> 
<script type="text/javascript" id="script1"> 
    function FunctionName() { 
     /* block of code here */ 
    } 
</script> 
<script type="text/javascript" id="script2"> 
    alert("working") 
</script> 

Я вставив этот код с помощью метода innerHTML. Тем не менее, я понял, что DOM вставляется <script> тег не начал выполняться, если не называть это так:

eval(document.getElementById('script1').innerHTML); 
eval(document.getElementById('script2').innerHTML); 

Теперь проблема заключается в следующем: Скрипт2 выполняется, и это делает предупреждение, что говорит: «работает », но когда я нажимаю на кнопку возвращает консольных эту ошибку:

Uncaught ReferenceError: FunctionName is not defined 

И странная часть, когда я копировать/вставить один и тот же код JavaScript, поместите его внутри Eval(); и введите его в консоль, он отлично работает!

так почему это происходит и как его решить?

Answer 1

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

Попробуйте положить свой скрипт1 перед div, в котором есть событие onClick.

Answer 2

This jsFiddle отлично работает с кодом, который у вас есть. Но я вижу, что это вызывает проблемы, если вы добавляете его после создания страницы, поскольку встроенные скрипты не выполняются при добавлении после загрузки страницы.

Если вы добавили его, см. Сообщение this для аналогичной проблемы, если вам нужно иметь его внутри html. Однако я бы рекомендовал использовать jQuery getScript вместо обычного ajax, если вы можете переместить ваши скрипты в другой файл.

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) { 
    // ... 
});