Question

我正在处理管理员审核提交的目标的应用页面。每个目标是3个不同表中的1个<tr>。 “审查”，“完成”和“提交”是三个表。

每个<tr>都有一个btn-group，可以根据当前的状态批准，还原或拒绝。更改状态后，将删除包含目标并将其附加到正确的表中。

当它移动btn-group下拉列表然后停止工作。我认为在附加后可能需要添加.dropdown();，但我无法使其正常工作。

不确定如何使用服务器端数据的这个b / c设置JSfiddle。有人对我提出建议吗？

这是一个包含我所有当前代码的JSfiddle： http://jsfiddle.net/xKLN4/

    approve: function(clicked) {
        var id = clicked.attr('data-id');
        $.post('<?=URL::to('supervisor/approve_objective')?>',{
            'id' : id,
            'trainee_id' : '<?=$trainee->id?>',
            'status' : 'completed' //or whatever it should be, one of 'submitted'|'completed'|'review'
        },
        function(data, textStatus){
            console.log('Post return data:');
            console.log(data);
            var status = data.status_translated;
            var lbl = $('.label-'+data.object.objective_id);
                    lbl.fadeOut('fast');
                    lbl.attr('class','label label-'+data.object.status+' label-'+data.object.objective_id)
                       .text(data.object.status_translated)
                       .fadeIn('fast');
                       clicked.closest('tr').children('td, th')
                               .animate({ padding: 0 })
                               .wrapInner('<div />')
                               .children()
                               .slideUp(function() { $(this).closest('tr').remove(); });

                    var row = clicked.closest('tr').html();

                    $('#approve-objectives-completed > tbody:last').append('<tr>'+row+'</tr>')
                                                                   .children('.dropdown-toggle')
                                                                   .dropdown();


        });


    },

编辑添加代码

Answer 1

由于wrapInner('<div />')

添加的div，下拉列表无法正常工作

一种解决方案是在将所有内容复制到新行后删除最后td中的div ...

approve: function(clicked) {

      clicked.closest('tr').children('td, th')
             .animate({ padding: 0 })
             .wrapInner('<div />')
             .children()
             .slideUp(function() { $(this).closest('tr').remove(); });

      var row = clicked.closest('tr').html();

      $('#approve-objectives-completed > tbody:last').append('<tr>'+row+'</tr>')

      //Remove div       
      var $lastTdDiv = $('#approve-objectives-completed > tbody > tr:last > td:last > div');  
      var contents = $lastTdDiv.contents();
      $lastTdDiv.replaceWith(contents);

以下是jsFiddle，其中包含我在'approve'功能中的更改

附加到不同的<table> </table>后，Bootstrap下拉列表停止工作

1 个答案: