Как выполнить функцию из файла вызванную инлайновым методом onClick?

Question

[Дмитрий Поляков]

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

$(document).on('click','#choose_school',function(){

Если в списке школы не окажется, то есть кнопка: "Добавить школу", по клику должна подгрузится форма добавления школы, но вариант типа:

jQuery('.form-group').on('click','#addSchool', function(){

отказывается срабатывать, а если onClick="openSchollForm();" то приходится, в том же файле писать весь скрипт, т.к. если переносить в другой файл, то браузер говорит, что функция openSchollForm не определена. Сам файл писал и в head и перед </body>.
Возможно ли вызвать функцию onClick="openSchollForm();" из подключенного файла?
Или, как решить вопрос отловом события click, после того, как элемент появляется после ajax загрузки?

Не знаю, какой код привести, покажу на скринах, как это должно работать, или скажите, какой кусок кода показать

Comments

[Павел Корнилов]

При предварительном подключении скрипта с функцией через тег <script> функция должна определяться и исполняться при вызове из любого обработчика.
Если скрипт подключается асинхронно, нужно определять его загрузку.

[Дмитрий Поляков]

KorniloFF, то есть, onClick="openSchollForm();" все-таки должна вызывать функцию из файла? Скрипт подключается синхронно.

[Павел Корнилов]

Дмитрий Поляков, да, должна работать. Проверьте в консоли имя функции - что выдаст?

[Дмитрий Поляков]

KorniloFF, not defined

[Павел Корнилов]

Дмитрий Поляков, странно. А подключение скрипта происходит в теле страницы или приходит с response?

[Дмитрий Поляков]

KorniloFF, с not defined разобрался, функция находилась внутри jQuery(document).ready(function($) { }); по этому не определялась. Но теперь возвращает undeained функция addSchollInactive()
Если запускать из консоли тело функции addSchollInactive(), то возвращает форму, то есть работает как задуманно

var openerSchoolForm = jQuery('#addSchool'),
        schoolForm = jQuery('#school_form');

function addSchollInactive(){
        jQuery.ajax({
            url:"../wp-content/wp-recall/add-on/yoga-catalog/data/school-form.php",//
            cache: true,
            beforeSend: function(responce){ 
                schoolForm.html('Запрос выполняется');
            },
            success: function(responce){ 
                schoolForm.slideDown().html(responce).slideDown(); 
                openerSchoolForm.text('Добавить школу-').addClass('active');
            },
            error: function(responce){ 
                schoolForm.html('Ошибка обращения к серверу');
            },
        });
    }


    
    function openSchollForm(){ 
        if (openerSchoolForm.hasClass('active') == false && openerSchoolForm.hasClass('inactive') == false) {
            addSchollInactive();
        }else if (openerSchoolForm.hasClass('active') == true) {
            schoolForm.slideUp();
            openerSchoolForm.text('Добавить школу').removeClass('active').addClass('inactive');
        }else if (openerSchoolForm.hasClass('inactive') == true) {
            schoolForm.slideDown();
            openerSchoolForm.text('Свернуть форму').removeClass('inactive').addClass('active');
        }
    
    }

[Павел Корнилов]

Эта функция и возвращает undefined. При этом, получив успешный ответ от сервера, она вставляет его в schoolForm.
Но тут нужно понимать разницу.

Answer 1

[EpicUsaMan]

$('.form-group').on('click','#addSchool', function(){

Вы вешаете event на '.form-group', если он создается после создания страницы, понятное дело, что такого event-а там нету

$(document).on('click', '.form-group #addSchool', function(){

Тут же event вешается на document, а callback функция срабатывает на нужном вам элементе.

Comments

[Дмитрий Поляков]

Так в том и дело, что после второй ajax загрузки $(document) то же отказывается срабатывать

[EpicUsaMan]

Дмитрий Поляков, если у вас несколько одинаковых id на странице -- тогда вполне понятно почему.