【问题标题】:javascript call a function from anotherjavascript调用另一个函数
【发布时间】:2019-04-24 23:24:03
【问题描述】:

我有这个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 函数中调用可编辑函数?

【问题讨论】:

  • 你到底想达到什么目的

标签: javascript jquery call


【解决方案1】:

使用addMemberToLessonDirect 创建的元素与ajax 回调异步创建。这意味着您并不真正知道它们何时可用于DOM - 并且当您致电$("#actual-member tr").editable({... 时肯定它们不可用。我假设它在您的代码中同步执行。

您确实知道它们在 ajax 调用后执行回调时可用,在 success: function(response){ ... 回调中。

根据这一点,您需要做的是在success: function(response){ .. 的回调返回中添加与$("#actual-member tr").editable({ 相同的逻辑

【讨论】:

  • 我在 $("#actual-member tr").editable: $.ajax({ method: 'POST', url: '/admin/lessons/editLessonLicenseMember/'+ values.id,数据:{'notes':values.notes},成功:函数(响应){},错误:函数(jqXHR,textStatus,errorThrown){}});但我怎样才能使按钮工作?
  • 您需要将影响从addMemberToLessonDirect ajax 调用返回的元素的所需代码放入success: function(response){ ... 中的回调函数中
  • $("#actual-member tr").editable({变成了一个JS插件(jqueryscript.net/demo/…)。你的意思是我要修改插件源代码吗?我是有点迷茫……
  • 不行,你需要在ajax调用创建的行创建后更新它们,这意味着在success: function(response){ 函数内部。
猜你喜欢
  • 2015-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-16
  • 1970-01-01
  • 2021-12-10
  • 2012-09-19
相关资源
最近更新 更多