skrypt js nie wykonuje się w pliku otwartym ajaxem

witam, dokładnie tak jak w temacie, mam skrypt wywołany AJAXem i wewnątrz tegoż skryptu nie mogę obsłużyć żadnego zdarzenia JSem. JS wcale nie działa, tak jak by go nie było. Kiedy plik odtworzę normalnie wszystko działa poprawnie. Ktoś, coś jakiś pomysł? Z góry dzięki :)
Kod pliku otwartego AJAXem, w nim ma nastąpić obsługa zdarzeń

<?php
    require_once "htmlelements/header.php";
    $urlG = $_GET['url'];
    if(isset($_SESSION['zalogowany'])){
        echo '
            <form id="new-post-form" action="new-post-add.php?url='.$urlG.'" method="POST">
    <input id="title-posts" class="inputTypeTextNewPosts" type="text" placeholder="Tytuł ..." name="title"/>
    <select id="category-posts" name="category_1">
        <option class="clOp">Kategoria</option>
        <option class="click"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
        <option class="clOp"></option>
    </select>
    <select id="category-posts_2" name="category_2">
        <option>C++, C</option>
        <option></option>
        <option></option>
        <option></option>
        <option></option>
        <option></option>
        <option></option>
    </select>
    <textarea id="content-new-post" name="content">
    </textarea>
    <input id="tags" class="inputTypeTextNewPosts" placeholder="Tagi" name="tags"/>
    <input id="addPost" class="buttonForum" type="submit" value="DODAJ"/>
</form>
<a class="buttonForum" href="forum.php">ANULUJ</a>
        ';
    }else{
        echo '<div class="error abab">Musisz sie zalogować aby dodać post</div>';
    }
    require_once "htmlelements/footer.php";
 
 
?>

Kod otwierający plik

<script>
    function loadDoc() {
  var xhttp = new XMLHttpRequest();
  var url = "DD";
  xhttp.onreadystatechange=function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content-forum").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "new-post.php?url=" + url, true);
  xhttp.send();
}
 
</script>

kod obsługi zdarzeń

$(function(){
    $('.click').click(function (){
        $('#category-posts_2').css({
            'display': 'block',
        })
    })
})
$(function (){
    $('.clOp').click(function (){
        $('#category-posts_2').css({
        'display' :' none',
    });
    })
})

Dla JSa w uproszczeniu treść zaladowana przez Ajax nie jest już widoczna w obsłudze zdarzeń. Tzn chodzi o to że jak ładujesz stronę to skrypty obsługują to co załadowałeś. Z to co doładowujesz już nie. Musisz odwołać się do elementu nadrzędnego który nie jest modyfikowany przez AJAX albo użyć innych metod
https://www.google.pl/search?q=attach+javasdript+to+ajax+loaded+content

Więc w jaki sposób mogę załadować ten plik tak aby później można w nim było obsługiwać JSa?

A musisz koniecznie ładować go JSem?

Skrypt muszę załadować do diva bez przeładowana strony, jak zrobić to inaczej niż JSem?

Jeżeli to jest jakaś duża ilość skomplikowanego kodu, możesz wypróbować funkcję ```
$.getScript()

Ale musisz dokładnie poczytać w dokumentacji jak działa, bodajże ładuje skrypt JSa ajaxowo. Czyli jak ładujesz swoją treść ajaxem, to po załadowaniu wywołujesz tą funkcję i ona Ci ładuje pliczek z JSem.
Ale jeżeli to prosty skrypt, to ja bym odwołał się po prostu do elementu, który nie jest przeładowywany AJAXem, np:

```html
<div id="ajax-wrapper">
    <div id="ajax-content"></div> <!-- tu ładujesz content via AJAX -->
</div>

<script type="text/javascript">
$("#ajax-wrapper").on('click',".twoj-selector-zaladowany-ajaxem",function()
{
// działania
});
</script>

Ponieważ div #ajax-wrapper nie jest załadowywany AJAXem, JS zawsze go zobaczy. Wystarczy więc odwołać się do niego, a w funkcji ```
.on

Moim rozwiązaniem byłoby ponowne rejestrowanie zdarzeń po załadowaniu Ajax-a. Zrobiłbym to tak:

function reloadEvents() {
    $('.click').off('click');

    $('.click').on('click', function() {
        $('#category-posts_2').css({
            'display': 'block'
        });
    });
};
// Po wczytaniu strony ładujemy zdarzenia
reloadEvents();

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    var url = "DD";
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("content-forum").innerHTML = this.responseText;

            // Ponownie ładujemy wszystkie zdarzenia (dzięki temu nowe elementy również będą posiadały ich obsługę)
            reloadEvents();
        }
    };
    xhttp.open("GET", "new-post.php?url=" + url, true);
    xhttp.send();
}