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){ ..中相同的逻辑

javascript从另一个调用函数

1 个答案: