javascript - 克隆的表单提交不适用于 jQuery

Question

我有一个表格，我正在克隆到该网站移动版本页面的另一部分。我试图让一个提交功能适用于两者。目前它适用于原始表单，但不适用于克隆表单。不知道发生了什么。这是我的代码：

HTML：

<div class="form-box-container">
    <div class="form-box">
        <div class="lets-go">Let's get started</div>

        <form action="process.php" name="form" id="form" method="get">

        <input type="text" name="fName" id="fName" placeholder="Name" class="text" />
        <input type="email" name="email" id="email" placeholder="Email" class="text" />
        <input type="text" name="phone" id="phone" placeholder="Phone" class="text" />
        <textarea name="comments" rows="10" class="text" id="comments" placeholder="Tell us about your project"></textarea>
        <input type="submit" name="btn-submit" id="btn-submit" class="btn-submit" value="Submit" />
        <input type="hidden" name="submit" id="submit" value="true" />

        </form>

    </div>

</div>

<div class="mobile-form"></div>

jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){

    $('.form-box-container').clone().appendTo('.mobile-form');

    $(document).on('click','.btn-submit',function(e){
        e.preventDefault();

        var fName = $(this).siblings('input[name=fName]').val();
        var email = $(this).siblings('input[name=email]').val();
        var phone = $(this).siblings('input[name=phone]').val();
        var comments = $(this).siblings('input[name=comments]').val();

        if(fName==''){
            alert('Please enter your name');
            return false;
        }

        if(email==''){
            alert('Please enter your email');
            return false;
        }

        if(phone==''){
            alert('Please enter your phone');
            return false;
        }

        $(this).closest('form').submit();

    });

});
</script>

非常感谢您的帮助。谢谢你。

标签： javascriptjquery