删除字形图标无法点击

Question

我无法重置表格。我试图保存数据，它正在发生。但是，当我不希望填写数据时，应按一下删除字形图标，然后将其重置为表格。我坚持重置数据。我编写并尝试了jquery脚本，但是它不起作用。我不想让它在Ajax代码上中止。

<script>
    //Banking details form validation
    $(document)
        .ready(
            function() {
                $('.editBankDetailBtn')
                    .click(
                        function() {
                            if ($('.editBankDetail').is(
                                    '[readonly]')) { //checks if it is already on readonly mode
                                $('.editBankDetail').prop(
                                    'readonly', false); //turns the readonly off
                                $('.editBankDetailBtn')
                                    .html(
                                        '<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span><span class="glyphicon glyphicon-remove">&nbsp;</span>');


                            } else { //else we do other things


                                var patt = /^([0-9]{11})|([0-9]{2}-[0-9]{3}-[0-9]{6})$/;
                                var reg = /^[A-Za-z]{4}[0-9]{6,7}$/;
                                patt.test('acdbdfdsfsf22-333-666666'); // true

                                var bname_1 = document.getElementById('bankName').value;

                                if (bname_1 == "") {

                                    document.getElementById('bankName').style.borderColor = "red";
                                    return false;
                                } else {
                                    document.getElementById('bankName').style.borderColor = "#cccccc";
                                }

                                var aaccount_number = document.getElementById('accountNumber');
                                if (!patt.test(aaccount_number.value)) {

                                    document.getElementById('accountNumber').style.borderColor = "red";
                                    return false;
                                } else {
                                    document.getElementById('accountNumber').style.borderColor = "#cccccc";
                                }


                                var bifsc = document.getElementById('ifscCode').value;

                                if (!reg.test(ifscCode.value)) {

                                    document.getElementById('ifscCode').style.borderColor = "red";
                                    return false;
                                } else {
                                    document.getElementById('ifscCode').style.borderColor = "#cccccc";
                                }

                                var bank_address = document.getElementById('branchAddress').value;

                                if (bank_address == "") {

                                    document.getElementById('branchAddress').style.borderColor = "red";
                                    return false;
                                } else {
                                    document.getElementById('branchAddress').style.borderColor = "#cccccc";
                                }




                                saveBankDetail();
                                cancelBankDetail()

                                $('.editBankDetail').prop(
                                    'readonly', true);
                                $('.editBankDetailBtn')
                                    .html(
                                        '<span class="glyphicon glyphicon-pencil">&nbsp;</span>');

                            }



                        });

            });


    function saveBankDetail() {

        $.ajax({
            url: '${pageContext.request.contextPath}/update-bankdetail.html',
            type: "post",
            data: {
                bankName: $('#bankName').val(),
                branchAddress: $('#branchAddress').val(),
                accountNumber: $('#accountNumber').val(),
                ifscCode: $('#ifscCode').val(),

            }

        });

    }

    function cancelBankDetail() {

        $.ajax({
            url: '${pageContext.request.contextPath}/employee-data.html',


        });

    }
</script>

Answer 1

在jQuery中，您为click()设置了editBankDetail操作，以插入这两个按钮的html。

<span class="glyphicon glyphicon-floppy-disk"></span>
<span class="glyphicon glyphicon-remove"></span>

但是，您永远不会为这些按钮分配处理程序。在代码中的某处，您应该具有如下所示的内容：

$('.glyphicon-floppy-disk').click({
    saveBankDetail();
});

$('.glyphicon-remove').click({
    cancelBankDetail();
});