why preventDefault() is not working in perticular case?

Question

In case of get OTP event.preventDefault() is working. But when I update register-form to verify OTP event.preventDefault() is not working.

How can it possible? please help.. thanks in advance!!!

Actually what I want to do, at first I have a form with input filed and a get OTP button. When the user click on get otp button with 10 digit valid number, I update form to another form verify OTP in this form . I have an input field of enter otp and verify otp button. I want compare otp with HARDCODE otp 4444.but here jQuery function preventDefault() is not working . this redirect to me / post request route.

            $(document).ready(() => {
                //get otp form
                $('#get-otp').submit(e => {
                    e.preventDefault();
                    let number = e.target.elements.number.value;
                    number = number.trim();
                    if (number.length !== 10) {
                        $('#msg').text("Please enter 10 Digit valid number.");
                        $('.alert').css('display', 'block');
                        setTimeout(() => {
                            $('.alert').css('display', 'none');
                        }, 3000);
                    } else {
                        $('#msg').text("Please enter valid OTP below.");
                        $('.register-form').html(`<form action="" id="verify-otp" method="post">
                            <div class="col col-sm-12 input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-keyboard-o icon"></i></span>
                                </div>
                                <input type="number" name="otp" id="otp" class="form-control" placeholder="Enter OTP here" />
                            </div>
                            <div class="checkbox" >
                                <label><input type="checkbox" />
                                    <a class="terms" data-toggle="modal" data-target="#terms_conditions-modal">
                                         <span>Agree to terms & conditions</span>
                                    </a>
                                </label>
                            </div>
                            <div class="btn-req-otp">
                                <button type="submit"
                                    style="background-color: #002e6e; color: white;" onclick="function verifyOtp()" class="btn">Verity OTP</button>
                            </div>
                        </form>`);
                        $('.alert').css('display', 'block');
                        setTimeout(() => {
                            $('.alert').css('display', 'none');
                        }, 3000);
                    }
                });
               // verify otp form
                $('#verify-otp').submit(e => {
                    e.preventDefault();
                    alert("ooo");
                    let otp = e.target.elements.otp.value;
                    otp = number.trim();
                    if (otp === 4444) {
                        $('#msg').text("Please enter 4 Digit valid OTP.");
                        $('.alert').css('display', 'block');
                        setTimeout(() => {
                            $('.alert').css('display', 'none');
                        }, 3000);
                    } else {
                        $('input[type="checkbox"]').click(function () {
                            if ($(this).prop("checked") == true) {
                                alert("successfully registered!!!!!!");
                            }
                            else if ($(this).prop("checked") == false) {
                                $('#msg').text("Please Accept our Terms & Conditions.");
                                $('.alert').css('display', 'block');
                                setTimeout(() => {
                                    $('.alert').css('display', 'none');
                                }, 3000);
                            }
                        });
                    }
                });
            });
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="container">

        <div class="col col-lg-6 col-md-8 col-sm-12 offset-lg-3 offset-md-2 box">
            <div class="alert alert-danger alert-dismissible fade show"
                style="padding: 2px; text-align: center; display: none;" role="alert">
                <span id="msg"></span>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="padding: inherit;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="register-box">
                <div class="row register-welcome">
                    <!-- dynamically change -->
                    <h2 class="text-center">Welcome to Serv Udyam...</h2>
                    <h4>A smart search for your smart home</h4>
                </div>
                <div class="row register-form">

                    <form action="" id="get-otp" method="post">
                        <div class="col col-sm-12 input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fa fa-mobile icon"></i></span>
                            </div>
                            <select>
                                <option>+91</option>
                            </select>
                            <input type="number" name="number" id="number" class="form-control"
                                placeholder="Enter Mobile No." autocomplete="off" />
                        </div>
                        <div class="btn-req-otp">
                            <button type="submit" style="background-color: #002e6e; color: white;" class="btn">Get
                                OTP</button>
                        </div>
                    </form>

                </div>
                <div class="row vendor-link">
                    <div>
                        <h6>Are you a vendor instead?</h6>
                        <a style="display: block; text-align: center;" href="#">Click Here</a>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Terms Conditions modal -->
    <div class="modal" tabindex="-1" id="terms_conditions-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Terms and Conditions</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>1.Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Dolor in impedit debitis ipsa quidem. Facilis velit consectetur quos ut sit?</p>
                    <p>2.Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Dolor in impedit debitis ipsa quidem. Facilis velit consectetur quos ut sit?</p>
                </div>

            </div>
        </div>
    </div>
        <footer class="footer">© 2020 Serv Udyam</footer>
    </body>

Answer 1

#verify-otp event is defined before insert into the document.

change to Event Delegate, like:

$('.register-form').on("click", "#verify-otp", function(e) {
    e.preventDefault();

Should work.