JavaScript вызывает функцию из другого

Question

У меня есть эта функция JS:

function addMemberToLessonDirect(id)
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: 'POST', 
            url: '/admin/lessons/addMember/licenseMemberId', 
            data: {'licenseMemberId' : id},
            success: function(response){ 

                if ($.trim(response)) {
                    var actualMembers = document.getElementById("actual-member");

                    if (!$.trim(actualMembers)) {

                        $('#no_members').hide();
                        var div1 = document.createElement('div');
                        div1.setAttribute('class','table-responsive');
                        $('#space').append(div1);
                        var actualMembers = document.createElement('table');
                        actualMembers.setAttribute('class','table');
                        div1.append(actualMembers);
                    }

                    var newRow = actualMembers.insertRow(actualMembers.length);
                    newRow.setAttribute( "data-id",response['llm']['id']);
                    id = newRow.insertCell(0);
                    id.innerHTML = response['user_saved']['id'];
                    nip = newRow.insertCell(1);
                    nip.innerHTML = response['user_saved']['nip'];
                    update.innerHTML ="<a class='btn btn-info btn-xs edit' title='{{__('member.edit')}}'> <i class='fa fa-pencil'></i> </a>";
                }
                $('#membersModal').modal('hide');

            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
            }
        });

    }

Этот вызов функции или создание таблицы (фактического члена) и добавление строк и столбцов.Эта функция вызывается, когда я выбираю элемент из модального, который у меня есть.Когда я выбираю элемент в модале, этот элемент будет добавлен в таблицу.

Теперь в этой таблице есть еще одна функция JS, которая делает некоторые поля редактируемыми и сохраняемыми:

$("#actual-member tr").editable({

        keyboard: true,
        dblclick: true,
        button: true,
        buttonSelector: ".edit",
        dropdowns: {},
        maintainWidth: true,

        edit: function (values) {
            $(".edit i", this)
                .removeClass('fa-pencil')
                .addClass('fa-save')
                .attr('title', '{{__('member.save')}}');
        },
        save: function (values) {

            values._token = '<?php echo csrf_token(); ?>';


            //console.log(values);
            var lessonLicenseMemberId = $(this).data('id');
            $.post('/admin/lessons/editLessonLicenseMember/' + lessonLicenseMemberId, values);
        },
        cancel: function(values) {
            $(".edit i", this)
                .removeClass('fa-save')
                .addClass('fa-pencil')
                .attr('title', '{{__('member.edit')}}');
        }

    });

Когда я пытаюсь нажать кнопку редактирования в таблице на элементе, не созданном с помощью функции addMemberToLessonDirect, он работает хорошо, но когда я нажимаю ту же кнопку на элементах, созданных функцией addMemberToLessonDirect, ничего не происходит.Я думаю, что они не имеют редактируемого свойства (вторая функция).Можно ли вызвать редактируемую функцию из функции addMemberToLessonDirect?

Answer 1

Элементы, созданные с помощью addMemberToLessonDirect, создаются асинхронно из обратного вызова ajax.Это означает, что вы на самом деле не знаете, когда они доступны для DOM, и наверняка они недоступны, когда вы звоните $("#actual-member tr").editable({....я предполагаю, что это где-то в вашем коде, который выполняется синхронно.

Вы знаете, что они доступны, когда обратный вызов выполняется после вызова ajax, в обратном вызове success: function(response){ ....

Для этого вам нужно добавить ту же логику, что и в $("#actual-member tr").editable({, к обратному вызову в success: function(response){ ..

.