Modal mostra os dados se der refresh varias vezes na pagina

Front-end
,
#1

Consegui resolver o outro tópico mas agora os dados só aparecem no modal se eu der refresh várias vezes na pagina.

tenho uma página de cadastro que tem umtab-panel e dentro de uma aba tem uma lista de parcelas do contrato:

<div class="tab-pane" id="parcelas">
	<div class="bw-tabela-cervejas">
		<th:block th:replace="contrato/TabelaParcelas"/>    						
	</div>		
</div> <!-- Fim da aba Parcelas -->

Tabelaparcela.html

<!DOCTYPE html>
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:th="http://www.thymeleaf.org"
	xmlns:data="http://www.thymeleaf.org/extras/data">

	
<div class="row">
	<!-- left column -->
	<div class="col-md-12">
		<!-- general form elements -->
		<div class="box box-primary">
			<div class="box-header with-border">
				<h3 class="box-title">Parcelas Geradas</h3>
			</div>
			<div class="box-body">
	    		<div class="row">
					<div class="bw-tabela-item  js-tabela-item" >
						<table class="table  table-hover">
							<thead>
								<tr>
									<th class="table-parcelas-col-doc">DOC</th>
									<th class="table-parcelas-col-vencimento">Vencimento</th>
									<th class="table-parcelas-col-carencia">Carência</th>
									<th class="table-parcelas-col-valorparcela">Valor Parcela</th>	
									<th class="table-parcelas-col-multa">Multa</th>
									<th class="table-parcelas-col-desconto">Desc.</th>
									<th class="table-parcelas-col-valorpago">Vlr Pago</th>
									<th class="table-parcelas-col-pagtoloc">Pgto Loc.</th>
									<th class="table-parcelas-col-pagtoprop">Pagto Prop.</th>
									<th class="table-parcelas-col-baixar">Status</th>
									<th class="table-parcelas-col-acoes">     Ações</th>																							
								</tr>
							</thead>

							<tbody>
								<tr th:each="item : ${itens}">
									<td th:text="${item.bloquete}" class="bw-table-detalhe" >Nome</td>
									<td th:text="${#temporals.format(item.vencimento, 'dd/MM/yyyy')}"class="bw-table-detalhe" >Vencimento</td>
									<td th:text="${item.carencia} ? ${#temporals.format(item.carencia, 'dd/MM/yyyy')} : ' '" class="bw-table-detalhe" >Nome</td>
									<td th:text="|R$ ${{item.valorParcela}}" class="bw-table-detalhe" >Nome</td>
									<td th:text="${item.multa}" class="bw-table-detalhe" >Nome</td>
									<td th:text="${item.desconto}" class="bw-table-detalhe" >Nome</td>
									<td th:text="|R$ ${{item.valorPago}}" class="bw-table-detalhe" >Nome</td>
									<td th:text="${item.dataPagamento} ? ${#temporals.format(item.dataPagamento, 'dd/MM/yyyy')} : ' '" class="bw-table-detalhe" >Nome</td>
									<td th:text="${item.dataRepasse} ? ${#temporals.format(item.dataRepasse, 'dd/MM/yyyy')} : ' '" class="bw-table-detalhe" >Nome</td>
									<td>
										<th:block th:if="${item.baixar}">
											<span class="label  label-success bw-table-detalhe">Pago</span>
										</th:block>
										<th:block th:if="${not item.baixar}">
											<span class="label  label-danger bw-table-detalhe">Aberto</span>
										</th:block>
									</td>
								
									<td class="text-center">
										<button type="button" class="btn btn-xs btn-link js-pesquisa-uma-parcela"
												data:item-parcela="${item.id}">
										<i class="glyphicon glyphicon-pencil"></i>
										</button>
										
										<a class="btn  btn-link  btn-xs  js-tooltip" title="Recibos"
										data-toggle="modal" data-target="#recibos">
											<i class="glyphicon glyphicon-print" style="color:black"></i>
										</a>

										<a class="btn  btn-link  btn-xs  js-tooltip" title="Pgto Locatário"
										data-toggle="modal" data-target="#pagamentoLocatario">
											<i class="glyphicon glyphicon-usd" style="color:red"></i>
										</a> 

										<a class="btn  btn-link  btn-xs  js-tooltip" title="Repasse Proprietário"
										data-toggle="modal" data-target="#repasseProprietario">
											<i class="glyphicon glyphicon-usd" style="color:green"></i>
										</a>  
									</td>
								</tr>
							</tbody>
						</table>												
					</div>
				</div>			
			</div>
		</div>				
	</div>	
</div>			
<th:block th:replace="contrato/BaixaParcelas :: baixaParcelas"></th:block>
<th:block th:replace="parcela/BaixaParcelas :: parcelas"></th:block>
<th:block th:replace="contrato/Recibos :: recibos"></th:block>
<th:block th:replace="contrato/PagamentoLocatario :: pagamentoLocatario"></th:block>
<th:block th:replace="contrato/RepasseProprietario :: repasseProprietario"></th:block>
</html>

Quando eu entro no cadastro de contrato e clicar na aba Parcelas mostra a lista de parcelas mas ao clicar nesse botão:

<button type="button" 
    class="btn btn-xs btn-link js-pesquisa-uma-parcela"
	data:item-parcela="${item.id}">
	<i class="glyphicon glyphicon-pencil"></i>
</button>

Ele executa o js certinho mas não exibe os dados no modal, quando eu volto para o cadastro e efetuo o refresh, então ele mostra os dados, quando eu saio do cadastro e volto para a lista e entro em outro cadastro faço tudo novamente aí ele mostra a parcela do cadastro anterior.

#2

Não entendi muito bem o problema. Onde está o js?

#3 
identar texvar Brewer = Brewer || {};

Brewer.PesquisaUmaParcela = (function() {

function PesquisaUmaParcela() {
	this.parcelaInput = $('.js-pesquisa-uma-parcela');
	this.emitter = $({});	
	this.idParcela = 0;	
	this.on = this.emitter.on.bind(this.emitter);
}

PesquisaUmaParcela.prototype.iniciar = function() {
	bindBaixaParcela.call(this);	
}

function bindBaixaParcela() {
	this.parcelaInput.on('click', onParcela.bind(this));
}

function onParcela(evento) {
	var input = $(evento.target);		
	idParcela = input.data('item-parcela');		
	var resposta = $.ajax({
		url: 'pesquisaparcela',
		cache : false,
		method: 'GET',
		data: {
			id : idParcela
		}
	});
	resposta.done(function(resposta) {
		console.log(resposta);
        $("#baixaParcelas").reload;
		$("#baixaParcelas").modal("show");
    });
}

return PesquisaUmaParcela;

}());

$(function() {
var pesquisaUmaParcela = new Brewer.PesquisaUmaParcela();
pesquisaUmaParcela.iniciar();
});to pré-formatado por 4 espaços