Загрузите JS-файл с html-содержимым через ajax

Question

Загрузка JS-файла с содержимым HTML в div с помощью ajax, если я загружаю его несколько раз, функции JS внутри файла test.js запускаются несколько раз, как при загрузке содержимого.

Создание содержимого HTML с помощьюPHP:

$html = '
    <script src="js/test.js" charset="utf-8"></script>
    <div id="form-container" class="p-3">
       <label>Teszt</label>

        <select class="form-control" id="type" name="type">
            <option value="t1">type 1</option>
            <option value="t2">type 2</option>
        </select>

    </div>
';

После создания содержимого оно отправляется обратно в ajax и добавляет содержимое в div.

Внутри файла test.js есть обработчики событий, такие как:

$(document).on("change", '#type', function (event) {
   alert("test");
});

Я пытался добавить версию файла .js с PHP DateTime, но она не работает.

Answer 1

Нашел решение: при многократной загрузке ajax он делегировал обработчики событий несколько раз.

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

$(document).off("change", '#type');

$(document).on("change", '#type', function (event) {
   alert("test");
});

Answer 2

Вы можете сделать что-то вроде ниже:

<?php

$timestamp = time();

$html = "
    <script src='js/test.js?ver={$timestamp}' charset='utf-8'></script>
    <div id='form-container' class='p-3'>
       <label>Teszt</label>
    </div>
";