1

Essa é minha table:

<div class="col-md-13">
        <table data-url="data1.json" data-height="500" data-sort-name="name" data-sort-order="desc" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th data-field="id" data-align="center" data-sortable="true">Nível Acesso</th>
                    <th data-field="name" data-align="center" data-sortable="true">Nome</th>
                    <th data-field="price" data-align="center" data-sortable="true">Usuário</th>
                </tr>
            </thead>

            <tbody id="nmUsuario"></tbody>
        </table>
    </div>

Não consigo o evento doubleclick e passar a linha selecionada como parâmetro para a controller via jquery. Esse é meu esqueleto jquery.

function ConsultarAcesso() {

    str = "";

    $.ajax({

        url: '/CadastroAcesso/ConsultaAcesso',
        datatype: 'json',
        contentType: 'application/json;charset=utf-8',
        type: 'POST',
        data: JSON.stringify({  }),
        success: function (data) {
        },
        error: function (error) {

        }
    })
}

Rodei isso no fiddle e funcionou.

<div id="divDb" class="teste" style="background-color: green; color: white; font-size: 30px;">
Duplo clique aqui e vai funcionar!
</div>

$(document).ready(function () {
    $(".teste").dblclick(function () {
         alert("Alô Paulão, Funcionou!");        
    });
});

Fiz isso em meu projeto e nada.

function AtualizaTabela() {

    str = "";

    $.ajax({

        url: '/CadastroAcesso/AtualizaTabelaUsuario',
        datatype: 'json',
        contentType: 'application/json;charset=utf-8',
        type: 'POST',
        data: JSON.stringify({}),
        success: function (data) {

            $(data.result_usu).each(function () {

                str += '<tr>';
                str += '<td data-field="id" class="col-md-4 clique">' + this.Nivel_Acesso1 + '</td>';
                str += '<td data-field="name" class="col-md-4 clique">' + this.NM_Usuario + '</td>';
                str += '<td data-field="price" class="col-md-4 clique">' + this.Usuario1 + '</td>';
                str += '</tr>';
            })

            $('#nmUsuario').html(str);
            str = "";

        },
        error: function (error) {

        }
    })
}
$(document).ready(function () {
    AtualizaTabela();

    $(".clique").dblclick(function () {
        alert("Alô Paulão, Funcionou!");
    });
})

Veja que eu criei uma classe chamada clique para cada <TD> da minha table.

6
  • 2
    Tenta atribuir às suas linhas o evento e pegar o seu conteúdo e botar na variável e depois passar para o seu post, ex:(OBS: Não testei, só coloquei a ideia) jsfiddle.net/raulsenaferreira/LokrjzcL/2 Commented 9/10/2014 às 12:15
  • Criei essa table no fiddle e atribui a classe ao jquery funcionou, mas no meu projeto não. O problema acho, está aqui> $(document).ready(function.... Pois nada do que faço em qualquer parte do meu projeto, funciona essa função. Não sei o que está de errado. O jquery.2.1.0.min.js está incluso na página layout. Mas eu também chamei direto da página herdada e não funcionou. Só para acrescentar.
    – pnet
    Commented 10/10/2014 às 12:01
  • Meu fiddle: fiddle.jshell.net/pnet/3xckdycm
    – pnet
    Commented 10/10/2014 às 12:08
  • Comecei a descobri algumas coisas. Quando a página é carregada, pelo debug, vi que a função jquery é chamada. Após o documento está totalmente carregado, aí, mesmo clicando na <td> não é chamado mais a função e o dblclick perde sua operacionalidade.
    – pnet
    Commented 10/10/2014 às 12:24
  • Vc poderia colar o código inteiro da sua página em um fiddle pra eu poder dar uma olhada? Commented 10/10/2014 às 22:31

2 Respostas 2

2

Para elementos adicionados dinamicamente à página, o evento de clique deve estar anexado a um elemento pai e delegado aos elementos onde pretendemos "disparar" o clique.

Isto é necessário porque quando o código de click() é lido os elementos não existem na página, logo o código do click() não fica anexado aos mesmos.

Onde tens:

$(".clique").dblclick(function () {
    alert("Alô Paulão, Funcionou!");
});

Troca por:

$(document).on("dblclick", '.clique', function (){
  alert("Alô Paulão, Funcionou!");
}

Nota: Pelo que vejo do código, os elementos alvo vão para dentro de um elemento com o ID #nmUsuario, pelo que podes limitar o scope da delegação da seguinte forma:

$('#nmUsuario').on("dblclick", '.clique', function (){
  alert("Alô Paulão, Funcionou!");
}
0

Resolvi da seguinte forma. Criei uma função para o duplo clique e chamo em cada duplo clique nas . Dessa forma funcionou. Ao invés de usar o document.ready eu usei uma função sendo chamada de dentro da tag assim. A função se chama duploclique.

$(data.result_usu).each(function () {

                str += '<tr>';
                str += '<td data-field="id" class="col-md-4 clique" onclick=" return duploclique();">' + this.Nivel_Acesso1 + '</td>';
                str += '<td data-field="name" class="col-md-4 clique" onclick=" return duploclique();>' + this.NM_Usuario + '</td>';
                str += '<td data-field="price" class="col-md-4 clique" onclick=" return duploclique();>' + this.Usuario1 + '</td>';
                str += '</tr>';
            })

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .