Как после ajax запроса загрузить файл js?

Question

[Денис Машанов]

Всем добрый вечер. У нас есть 3 файла. 1 - Forms.js c обработчиками нажатий клавиш формы menu.php, 2 - форма menu.php, 3 - index.php.
В index.php есть кнопка при нажатии, которой загружается форма menu.php, загрузка происходит с помощью .ajax. Для того чтобы обработчики нажатий на кнопки работали в форме menu.php я в конец html кода писал "", но когда я открываю форму, то из-за загрузки Forms.js вывод формы затормаживалась на 1 секунду. Тогда я решил загрузить скрипт Forms.js после вывода этой формы и для этого я использовал метод success у .ajax чтобы после загрузки и появлении формы загрузить Forms.js, но проблема в том, что я не знаю как его загрузить. Как мне эту проблему решить?

Comments

[alex]

что значит

загрузить js в конец этого div

Надеюсь я толково и понятно объяснил)

нет

[Денис Машанов]

Alex: поправил

[Stalker_RED]

Денис Машанов: Все равно непонятно. Лучше приведите пример кода на jsfiddle или plnkr.

[Денис Машанов]

Stalker_RED: Хорошо.

[Денис Машанов]

Stalker_RED: Я отредактировал вопрос и описание.

[alex]

Денис Машанов: я опять ничего не понял, наверно я просто туп. но впечатление такое, что вы там костылями какими-то занимаетесь. скрипт с обработчиками подключайте сразу на страницу, не нужно ничего отдельно скачивать, только в таком случае нужно делегирование сделать через $().on(). при нажатии на кнопку, ajax'ом грузите разметку с формой и вставляете её в нужное место. всё. из-за делегирования форма будет реагировать на нажатия клавиш.

[Денис Машанов]

Alex: Вам скинуть исходник js ?
Вот часть кода

$('.cta_a').click(function () { // смена формы
    if (!$("#form-signup").is(":visible")) $('.toggle').children('i').toggleClass('fa-pencil');
    if ($("#form-login").is(":visible")) { log(), rec(); }
    else if ($("#form-signup").is(":visible")) { reg(), rec(); }
    else if ($("#form-rec").is(":visible")) { log(); rec(); }
    //$('#formsusers').animate({
    //    'margin-top': (($('#formsusers').height() / 2) * -1)
    //}, 1000);
});

[Stalker_RED]

Денис Машанов: Лучше приведите пример кода на jsfiddle или plnkr.

Вот часть кода

если вы исполняете этот код еще до того как в DOM появится элемент .cta_a, то этот обработчик не навесится, так как ему некуда.

[Денис Машанов]

Stalker_RED: По моему эта ошибка у меня из-за недопонимания работы js. У нас обработчики вешаются на элемент html. То есть сначала в dom должна произойти загрузка html элемента, а только потом вешается обработчик(загрузка файла js)?

[Денис Машанов]

Stalker_RED: Если использовать один только $.getScript('script/Forms.js'), то не работает, а если ещё предварительно загрузить перед </body>

<script type="text/javascript" src="script/Forms.js"></script>

, а только потом $.getScript('script/Forms.js'), то всё работает, скажите пожалуйста почему?

[alex]

Денис Машанов:

То есть сначала в dom должна произойти загрузка html элемента, а только потом вешается обработчик

да

обработчики вешаются на существующие элементы. если вы вешаете $('.super-block').click() - то этот обработчик не повесится если .super-block не существует в dom, более того этот обработчик не повесится даже после того как .super-block будет вставлен в dom, например через ajax, в этом случае нужно либо заного инициалировать обработчик после вставки .super-block в dom, либо использовать делегирование событий.

если вам нужно загрузить файл скрипта из javascript, то можно сделать как-то так(если я правильно понял что вам нужно):

spoiler

$('button').click(function() {
	$.ajax({
		method: 'get',
		url: '/get-menu-form/',
		success: function(menuHTML) {
			$('.whatever').html(menuHTML).promise().done(function() {
				var script = window.document.createElement('script');
				script.src = '/path/to/form.js';
				script.async = false;
				$('body').append(script);
			})
		}
	})
})

[Денис Машанов]

Alex: Да это оно, но я ещё нашёл метод который написал чуть выше, посмотрите на него пожалуйста, это нормально или лучше ваш метод использовать?

[Денис Машанов]

Alex: Так тоже работает.

$('body').append('<script type="text/javascript" src="script/Forms.js"></script>');

Спасибо всем кто помог

[alex]

Денис Машанов: я никогда не пользовался .getScript()

Если использовать один только $.getScript('script/Forms.js'), то не работает

проверьте url может у вас файл вобще не скачивается, в девтулзах промониторьте запрос к серверу, не должно быть 404

[Денис Машанов]

Alex: Урл всё правильно да и код рабочий, ошибка была на стороне загружаемого js. Надо было получение самих элементов формы со стороны загружаемого js обернуть в $(document).ready(function (){})

Answer 1

[Stalker_RED]

Если вы хотите загрузить скрипт и выполнить его, то для этого есть jQuery.getScript

Answer 2

[Денис Машанов]

Решение от Alex

var script = window.document.createElement('script');
        script.src = '/path/to/form.js';
        script.async = false;
        $('body').append(script);

или

$('body').append('<script type="text/javascript" src="script/Forms.js"></script>');