第一次单击时提交按钮不起作用

Question

我在表格中有一个提交按钮 -

 jQuery(document).ready(function() { $("#VEGAS").submit(function() { $('#One').click(function() { var form_data = $("#VEGAS").serialize(); var routeUrl = "<?= url('/') ?>/vpage"; $.ajax({ url: routeUrl, type: "POST", data: form_data + '&jegy=' + test, success: function(result) { $('#alert').html('successfully added!'); $('#msg-group').delay(1000).hide('slow'); } }); }); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <button id="One" type="submit" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button> 

一切都工作正常，但上面的按钮不是第一次点击工作。 我怎么能摆脱这个问题？

Answer 1

$('#One').click(function(){...})

应该注册

jQuery(document).ready(function () {...})

如

jQuery(document).ready(function () {
    $('#One').click(function(){...})
});

因为，在你的代码中你注册$('#One').click() $("#VEGAS").submit()因此$('#One').click()在$("#VEGAS").submit()时注册$("#VEGAS").submit()第一次调用$("#VEGAS").submit() 。 因此，在第一次尝试中，这不起作用，但在第二次尝试中起作用。

Answer 2

试试这个：你是绑定表单提交中的一个按钮的点击事件处理程序，因此它是第一次点击时绑定点击事件处理程序，第二次点击它是调用点击处理程序。 您可以删除按钮的click事件并在jquery代码HTML下面使用：

<button id="One" type="submt" name="submit_5" class="submitBTN addnowBtn" value="Light Nightclub">Add Now</button>

jQuery的：

jQuery(document).ready(function () {
                $('#VEGAS').on("click",function (event) {
                    event.preventDefault();
                    var form_data = $("#VEGAS").serialize();
                    var routeUrl = "<?= url('/') ?>/vpage";
                    $.ajax({
                        url: routeUrl,
                        type: "POST",
                        data: form_data + '&jegy=' + test,
                        success: function (result) {
                            $('#alert').html('successfully added!');
                            $('#msg-group').delay(1000).hide('slow');
                         }
                    });
            }); 

Answer 3

在submit()内部， .click()是不必要的： -

删除$('#One').click(function () {

使用任何一个（ .submit()或.submit() .click() ）

所以：-

或

<script>
jQuery(document).ready(function () {
    $("#VEGAS").submit(function (e) {
            e.preventDefault();
            var form_data = $("#VEGAS").serialize();
            var routeUrl = "<?= url('/') ?>/vpage";
            $.ajax({
                url: routeUrl,
                type: "POST",
                data: form_data + '&jegy=' + test,
                success: function (result) {
                    $('#alert').html('successfully added!');
                    $('#msg-group').delay(1000).hide('slow');
                 }
            });
        return false;
    }); 
});//missed in your code
</script>

要么

<script>
jQuery(document).ready(function () {
    $('#One').click(function (e) {
        e.preventDefault();
        var form_data = $("#VEGAS").serialize();
        var routeUrl = "<?= url('/') ?>/vpage";
        $.ajax({
            url: routeUrl,
            type: "POST",
            data: form_data + '&jegy=' + test,
            success: function (result) {
                $('#alert').html('successfully added!');
                $('#msg-group').delay(1000).hide('slow');
             }
        });
    });
    return false;
}); //missed in your code
</script>

注意：-

如果你有多个相同的id，那就完全错了。 要么将它们转换为课堂，要么为每个人提供不同的身份

检查浏览器开发人员控制台以查看引发的所有错误并纠正所有这些错误

Answer 4

  var routeUrl = "<?= url('/') ?>/vpage";

这是错误。 在这里使用静态路径。

<script>
        $(document).ready(function () { 
            $("#VEGAS").submit(function () {

                    var form_data = $("#VEGAS").serialize();
                    var routeUrl = "vpage";
                    $.ajax({
                        url: routeUrl,
                        type: "POST",
                        data: form_data + '&jegy=' + test,
                        success: function (result) {
                            $('#alert').html('successfully added!');
                            $('#msg-group').delay(1000).hide('slow');
                         }
                    });

                return false;
            }); 
 }); 
</script>