функция swal не работает в подвиде, который загружается с помощью ajax

Question

Я использую Codeigniter

Я загрузил подпредставление, используя функцию HTML ajax.с этой точки зрения я использую swal (sweetalert), но не работаю.вот мой код.

settings_js.php

$('#banks').on('click',function (e) {
//    $('#banks').onclick(function (e) {

        e.preventDefault();
//        alert("hello");
        load_banks();
    })

    function load_banks() {
        $.ajax({
            url: 'settings/banks_view',
            type: "POST",
//            data: oData,
            dataType: "HTML",
            processData: false,
            contentType: false,
            success: function (data) {
//                console.log(data);
                $(".content-page").html(data);

//                banks_datatable();

            },
            error: function (jqXHR, textStatus, errorThrown) {
                //console.log(jqXHR.responseText)
                swal("ERROR!", jqXHR.responseText, 'error');
            }
        })
    }

settings / banks_view

public function banks_view()
    {
        $table = 'banks';
        $this->load->model("crud_m");
        $data['records'] = $this->crud_m->get_data($table);
        $this->load->view("settings/banks_v", $data);
    }

banks_view

$("#bnk_form").submit(function (e) {
        e.preventDefault();

//        alert("psersonal form testing");

        var form = document.forms.namedItem("bnk_form");

        var oData = new FormData(form);

        // ajax adding data to database
        $.ajax({
            url: 'settings/bank_data_save',
            type: "POST",
            data: oData,
            dataType: "JSON",
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.status == true) {
                    $('#bank-modal').modal('toggle');
                    const toast = swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000
                    });

                    toast({
                        type: 'success',
                        title: 'Signed in successfully'
                    })
                } else {
                    swal("ERROR!", data, "error")
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //console.log(jqXHR.responseText)
                swal("JS ERROR!", jqXHR.responseText, 'error');
//                alert(jqXHR.responseText);
            }
        });
    })

Первый код - это файл, который загружает другое представление.с этой точки зрения я использую функцию swal , но эта функция не работает.

Answer 1

Вы можете попробовать это в соответствии с вашим требованием, как показано ниже

  $('.btn-sweet').on('click', function(){
    swal({
    title: "Good job!",
    text: "You clicked the button!",
    icon: "success",
    button: "Continue!",
    });
  });

.sweetBox {
    background: linear-gradient(60deg,#00000024 50%,#00000047 50%);
    margin: 0 auto;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.btn-sweet {
    background: linear-gradient(0deg,#000000eb,#000000a6);
    border: 2px solid #000;
    padding: 15px 25px;
    text-transform: uppercase;
    color: #eeeeeea8;
    border-radius: 50px;
    box-shadow: 0px 5px 25px #0000008c;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.btn-sweet:hover {
    background: linear-gradient(0deg,#00000066,#00000000);
    border: 2px solid #000;
    padding: 15px 25px;
    text-transform: uppercase;
    color: #000000;
    border-radius: 50px;
    box-shadow: 0px 5px 25px #0000008c;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<div class="sweetBox">
<button type="button" class="btn btn-sweet">Click me to Sweet Allert</button>
</div>