Sweetalert 组件未在 javascript 的循环内触发

Question

在一个 onclick 事件中，有三个用于验证的 sweetalert。我正在处理动态添加和删除的行，使用 jquery 和 javascript.

问题是第二个 sweetalert（在循环内）似乎与第三个 sweetalert 冲突，因为它没有触发......奇怪的是第一个 sweetalert 和第三个 sweetalert 总是正常工作运行。当我评论第三个 sweetalert 部分时，第二个 sweetalert（在循环内）开始工作。我已经尝试了所有方法，但似乎与第二个 sweetalert 有一些冲突，也许是因为它在循环中，或者其他原因......有人知道如何帮助我吗？

HTML:

<div class="tab-pane" id="tabPessoaAnaliseCredito" role="tabpanel">
    <div class="form-horizontal">
        <div class="form-group row">
            <div class="col-md-12">
                <div class="col-md-12" id="div-pessoa-analise-credito">
                    <div class="form-group align-items-center row row-pessoa-analise-credito">
                        <div class="card card-shadow col-md-12 pl-0 pr-o pt-0 pb-0 border border-default">
                            <div class="card-block">
                                <div class="nav-tabs-horizontal" data-plugin="tabs">                    
                                    <div class="tab-content pt-20">
                                        <div class="tab-pane active tb-geral-conteudo" id="tb-geral-pessoa-analise-credito[@indiceI]" role="tabpanel">                       
                                            <div class="form-group row">
                                                <div class="col-md-12">
                                                    <div class="col-md-12" id="div-pessoa-analise-credito-consulta">                                   

                                                    
                                                    </div>
                                                </div>
                                            </div>
                                        </div>                    
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-2">
            <button type="button" id="btn-add-pessoa-analise-credito" class="btn btn-dark">
                <i class="icon wb-plus" aria-hidden="true"></i>
                Nova Análise de Crédito
            </button>
        </div>
    </div>
</div>

JS:

$("#div-pessoa-analise-credito").on("click", ".btn-encerrar-pessoa-analise-credito", function (e) {
    e.preventDefault();

    var indiceI = $(this).closest('.row-pessoa-analise-credito').index();
    var hidPessoaAnaliseCreditoAnaliseEncerrada = $(this).closest('.row-pessoa-analise-credito').find('.hid-pessoa-analise-credito-analise-encerrada');
    var rowPessoaAnaliseCredito = $(this).closest('.row-pessoa-analise-credito');
    
    //Primeiro sweetalert 
    if (hidPessoaAnaliseCreditoAnaliseEncerrada.val() === 'True') {
        swal("Atenção!", "Análise de Crédito já [Encerrada]. :|", "warning");

        return false;
    }      
    
    //Segundo sweetalert 
    $(rowPessoaAnaliseCredito).find('.row-pessoa-analise-credito-consulta').each(function (indiceJ, elemento) {

        var orgaoProtecaoCredito = $(elemento).find('.sel-pessoa-analise-credito-consulta-orgao-protecao-credito').val();
        if (orgaoProtecaoCredito === '') {

             swal("Oops!", "O campo [Órgão de Proteção ao Crédito] é obrigatório.", "error");

            return false;
           
        }
    });
    
    //Terceiro sweetalert 
    swal({
        title: "Tem certeza?",
        text: "Esta operação encerrará e bloqueará permanentemente esta Análise de Crédito.",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-warning",
        confirmButtonText: 'Sim, prosseguir!',
        cancelButtonText: "Não, cancelar!",
        closeOnConfirm: false,
        closeOnCancel: false
        //timer: 2000
    }, function (isConfirm) {
        if (isConfirm) {
            hidPessoaAnaliseCreditoAnaliseEncerrada.val('True');
            bloquear_campos_pessoa_analise_credito(indiceI, rowPessoaAnaliseCredito);

            $(rowPessoaAnaliseCredito).find('.row-pessoa-analise-credito-consulta').each(function (indiceJ, elementoPessoaAnaliseCreditoConsulta) {
                bloquear_campos_pessoa_analise_credito_consulta(indiceI, indiceJ, elementoPessoaAnaliseCreditoConsulta);
            });

            swal("Sucesso!", "A Análise de Crédito foi encerrada e bloqueada! :)", "success");

        } else {
            swal("Cancelado", "Operação cancelada! :)", "error");
        }

        
    });

    //remove eventos (Atenção: se remover a limpeza dos dois eventos, a tabulação não funcionará, pois o Alert joga o foco todo para ele.)
    window.onkeydown = null;
    window.onfocus = null;
});

Answer 1

.each(function (indiceJ, elemento) {..}); 中的 return false; 语句只是跳出循环，但不会阻止执行继续执行整个点击事件函数中的 //Terceiro sweetalert 逻辑。

我怀疑在 .each() 循环之后添加一个标志来检查以确定您是否应该继续是您需要的：

// ...
//Segundo sweetalert 
var validationFailed = false;  // define our flag
$(rowPessoaAnaliseCredito).find('.row-pessoa-analise-credito-consulta').each(function (indiceJ, elemento) {

    var orgaoProtecaoCredito = $(elemento).find('.sel-pessoa-analise-credito-consulta-orgao-protecao-credito').val();
    if (orgaoProtecaoCredito === '') {

         swal("Oops!", "O campo [Órgão de Proteção ao Crédito] é obrigatório.", "error");
        validationFailed = true; // set the flag
        return false;
       
    }
});

// check our flag
if(validationFailed){
   return false; 
}

//Terceiro sweetalert 
// ...

Sweetalert 组件未在 javascript 的循环内触发

Sweetalert component is not firing inside a loop with javascript

javascript

jquery

sweetalert

sweetalert2