Vários formulários são carregados em um modal e os dados que são salvos usam o texto do botão ('salvar' inserir novo registro, 'atualizar' atualizar registro existente...) No snippet abaixo, há dois botões - 'inserir' e 'padrão' - quando o modal padrão é iniciado, o spinner funciona, mas quando o texto do botão é alterado, não. Alguma ideia de como isso pode ser superado?
$('#insertButton').on('click', function() {
$('#testButton').text('Save');
$('#testModal').modal('show');
})
$('#standardButton').on('click', function() {
$('#testModal2').modal('show');
})
<
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<div class="container">
<button type="button" id="insertButton">Insert</button>
<button type="button" id="standardButton">Standard</button>
</div>
<div class="modal" id="testModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="testButton" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="modal" id="testModal2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="testButton2" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Save
</button>
</div>
O
text()
método define o conteúdo de um elemento sobrescrevendo todos os seus nós filhos, incluindo tags regulares.Para garantir que somente o texto seja alterado enquanto todos os outros filhos permanecem intactos:
TEXT_NODE
.