Olá, eu estou desenvolvendo um app de apostas de futebol que apresenta uma tabela com valores de cotações de diferentes modos de jogo para cada partida cadastrada. Para cada partida eu tenho uma tabela com o seguinte código:
<div id="partida_1" class="panel-heading-margin">
<table id="jogo_1" onclick="getTableClick()" class="w3-table-all w3-card-4 myTable" data-id="1" data-horario="05-05-2017 12:00:00" data-jogo="Barcelona X Real Madrid">
<thead>
<tr id="infopartida_1" class="w3-dark-grey">
<th colspan="20">
<small>Barcelona X Real Madrid</small>
<span class="pull-right"><small>05-05-2017 12:00:00 </small> <button id="removejogo_1" class="btn btn-danger btn-xs pull-right hidden" onclick="removeJogo(1)" ><span class="fa fa-close"></span></button></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-key="jogo_1_1" data-valorcotacao="1.4" data-nomecotacao="Casa" class="cotacao" style="text-align: center" width="200">Casa <br> <strong>1.4</strong></td>
<td data-key="jogo_1_2" data-valorcotacao="1.2" data-nomecotacao="Empate" class="cotacao" style="text-align: center" width="200">Empate <br> <strong>1.2</strong></td>
<td data-key="jogo_1_3" data-valorcotacao="1.1" data-nomecotacao="Fora" class="cotacao" style="text-align: center" width="200">Fora <br> <strong>1.1</strong></td>
</tr>
<tr>
<td data-key="jogo_1_4" data-valorcotacao="2.1" data-nomecotacao="Ambas" class="cotacao" style="text-align: center" width="200">Ambas <br> <strong>2.1</strong></td>
<td data-key="jogo_1_5" data-valorcotacao="5.4" data-nomecotacao="+2.5GM" class="cotacao" style="text-align: center" width="200">+2.5GM <br> <strong>5.4</strong></td>
<td data-key="jogo_1_6" data-valorcotacao="2.1" data-nomecotacao="-2.5GM" class="cotacao" style="text-align: center" width="200">-2.5GM <br> <strong>2.1</strong></td>
</tr>
<tr>
<td data-key="jogo_1_7" data-valorcotacao="2.1" data-nomecotacao="1.5GM" class="cotacao" style="text-align: center" width="200">1.5GM <br> <strong>2.1</strong></td>
<td data-key="jogo_1_8" data-valorcotacao="2.1" data-nomecotacao="Casa ou Empate" class="cotacao" style="text-align: center" width="200">Casa ou Empate <br> <strong>2.1</strong></td>
<td data-key="jogo_1_9" data-valorcotacao="2.1" data-nomecotacao="Fora ou Empate" class="cotacao" style="text-align: center" width="200">Fora ou Empate<br> <strong>2.1</strong></td>
</tr>
<tr>
<td data-key="jogo_1_10" data-valorcotacao="1.23" data-nomecotacao="C. Marca" class="cotacao" style="text-align: center" width="200">C. Marca <br> <strong>1.23</strong></td>
<td data-key="jogo_1_11" data-valorcotacao="1.23" data-nomecotacao="F. Marca" class="cotacao" style="text-align: center" width="200">F. Marca <br> <strong>1.23</strong></td>
<td data-key="jogo_1_12" data-valorcotacao="1.23" data-nomecotacao="Casa ou Fora" class="cotacao" style="text-align: center" width="200">Casa ou Fora <br> <strong>1.23</strong></td>
</tr>
<tr>
<td data-key="jogo_1_13" data-valorcotacao="1.45" data-nomecotacao="C. Vence F. Marca" class="cotacao" style="text-align: center" width="200">C. Venc. F. Marca <br> <strong>1.45</strong></td>
<td data-key="jogo_1_14" data-valorcotacao="1.45" data-nomecotacao="F. Vence C. Marca" class="cotacao" style="text-align: center" width="200">F. Venc. C. Marca <br> <strong>1.45</strong></td>
<td data-key="jogo_1_15" data-valorcotacao="1.45" data-nomecotacao="C. Venc. Zero" class="cotacao" style="text-align: center" width="200">C. Venc. Zero <br> <strong>1.45</strong></td>
</tr>
<tr>
<td data-key="jogo_1_16" data-valorcotacao="1.1" data-nomecotacao="F. Venc. Zero" class="cotacao" style="text-align: center" width="200">F. Venc. Zero <br> <strong>1.1</strong></td>
</tr>
</tbody>
</table>
E tenho a seguinte função para receber os clicks da tabela:
function getTableClick(){
$('.myTable tbody tr td').click(function () {
//Valores passados pelo click na tabela
var jogoId = $(this).closest('table').data('id');
var cotacao = $(this).data('nomecotacao');
var partida = $(this).closest('table').data('jogo');
var valorCotacao = $(this).data('valorcotacao');
$(this).addClass('selected-cell');
$(this).parents('tbody').find('td').not(this).removeClass('selected-cell');
$('#removejogo_' + jogoId).removeClass('hidden');
$('#parcialApostas').removeClass('hidden');
$('#infopartida_' + jogoId).removeClass('w3-dark-grey');
$('#infopartida_' + jogoId).addClass('w3-green');
//Teste
alert(cotacao + ': ' + valorCotacao);
//Inclui o jogo clicado na tabela.
/*$('#modalBody').append(
'<tr id="tr_133" data-jogo="'+ partida +'" data-key="'+ cotacao +'" > \
<td> \
<p>'+ partida +'<span class="pull-right">R$'+ valorCotacao +'</span></p> \
</td> \
</tr>'
);*/
});}
Quando a tabela é renderizada eu eu clico nela pela primeira vez a função não é executada, somente no segundo click. Além disso quando eu clico novamente em uma célula a função é executada duas vezes, se eu clico novamente executa três vezes e assim por diante. Se alguém puder me ajudar à achar o erro eu agraço imensamente.
getTableClick
? quando queres que seja executada?