jqGrid - 表单上的自定义按钮未被删除

Question

我的页面上有几个网格。在其中一个我有一个自定义编辑表单与自定义按钮（TestarConexão），如下所示：

我已经制定了删除所有自定义字段和按钮的逻辑，并在每次用户点击编辑时再次创建它们。如果我单击以编辑此网格上的行，它可以正常工作（自定义按钮只显示一次），但是当我单击编辑另一个网格中的行然后单击以编辑此网格上的行时，会出现问题。这是发生的事情：

每次单击编辑时，按钮都会被复制。这是我的代码：

 beforeShowForm: function(form) {
    /* editouServico is a global boolean variable 
     * that checks if user has already clicked on the button. 
     * If it's true, then I remove all the fields and button. 
     * If false, it just creates all the fields and button.
    */
    if(editouServico) { 
        //remove fields and button
        $('#tr_servidor').remove();
        $('#tr_porta').remove();
        $('#tr_nomeBanco').remove();
        $('#tr_usuario').remove();
        $('#tr_senha').remove();
        $('#botaoTestarConexao').remove();
        alert('removeu');
    }
    //create fields
    $('<tr style="" rowpos="4" class="FormData" id="tr_servidor"> <td class="CaptionTD">Servidor</td><td class="DataTD">&nbsp;<input id="servidor" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>').insertAfter(linhaCodigo);    
    var linhaServidor = $('#tr_servidor', form).show();
    $('<tr style="" rowpos="5" class="FormData" id="tr_porta"> <td class="CaptionTD">Porta</td><td class="DataTD">&nbsp;<input id="porta" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>').insertAfter(linhaServidor);    
    var linhaPorta = $('#tr_porta', form).show();
    $('<tr style="" rowpos="6" class="FormData" id="tr_nomeBanco"> <td class="CaptionTD">Banco</td><td class="DataTD">&nbsp;<input id="banco" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>').insertAfter(linhaPorta);    
    var linhaBanco = $('#tr_nomeBanco', form).show();
    $('<tr style="" rowpos="7" class="FormData" id="tr_usuario"> <td class="CaptionTD">Usuário</td><td class="DataTD">&nbsp;<input id="usuario" type="text" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>').insertAfter(linhaBanco);    
    var linhaUsuario = $('#tr_usuario', form).show();
    $('<tr style="" rowpos="8" class="FormData" id="tr_senha"> <td class="CaptionTD">Senha</td><td class="DataTD">&nbsp;<input id="senha" type="password" role="textbox" class="FormElement ui-widget-content ui-corner-all"></td></tr>').insertAfter(linhaUsuario);  

    //create button
    $('<a href="#" id="botaoTestarConexao" >Testar Conexão<span class="ui-icon ui-icon-transferthick-e-w"></span></a>')
    .click(function() { 
        ... 
    }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
      .prependTo("#Act_Buttons>td.EditButton");

    editouServico=true; 
}

正如你在我的代码中看到的那样，我已经发出一个警告，看看代码是否进入那里并且确实存在..

PS：editouServico以值false开头，每次重新创建网格时都设置为false

Answer 1

我解决了它寻找网格的id，以便它不会“混淆”添加/删除按钮的位置。另外，我改变了我删除的方式。

我的代码现在是：

.addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
      .prependTo("#TblGrid_grid_servico_2 > tbody > tr#Act_Buttons > td.EditButton");` 

而不是

.addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left") .prependTo("#Act_Buttons>td.EditButton");

和

$('#botaoTestarConexao').removeClass("fm-button ui-state-default ui-corner-all fm-button-icon-left").remove();

而不是

$('#botaoTestarConexao').remove();