Question

我在 -

这样的表单中有一个提交按钮

＆＃13;

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;
      });

＆＃13;

<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>

＆＃13;

每件事情都运转良好，但上面的按钮在第一次点击时无效。我该如何摆脱这个问题？

Answer 1

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

应该在

中注册

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

as

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

因为，在您的代码中，您正在$('#One').click()中注册$("#VEGAS").submit()，因此$('#One').click()首次调用$("#VEGAS").submit()时会注册<html lang="en"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> </head> <body> <div id="editor"> <form id="query" methods="GET"> <div id="form_container" class="row"> <div class="form-group"> <label for="choice-selector">Choices</label> <select class="form-control" id="choice-selector" v-model="choice_id" v-on:change="refreshOptions"> <option v-for="item in choices" v-bind:value="item.id"> {{ item.name }} </option> </select> <span>Current choice id: {{ choice_id }}</span> <br> <label for="option-selector">Options</label> <select class="form-control" id="option-selector" v-model="option_id" > <option v-for="item in options" v-bind:value="item.id"> {{ item.name }} </option> </select> <span>Current option id: {{ option_id }}</span> </div> </div> </div> <script> let index = 0; new Vue({ el: '#editor', data: { choice_id: '1', choices: [ { id: '1', name: 'Choice A' }, { id: '2', name: 'Choice B' }, { id: '3', name: 'Choice C' } ], option_id: '1', options: [ ] }, ready: function startFetch() { this.refreshOptions(); }, methods: { refreshOptions: function refreshOptionList() { console.log(">>refreshOptionList() index:" + index); const vm = this; const newOptions = [{ id: index, name: 'Option based on choices list id: ' + vm.choice_id }]; vm.$set('options', newOptions); index += 1; } }, }); </script> </body> </html>。因此，在第一次尝试中，这不起作用，但在第二次尝试中起作用。

Answer 2

试试这个：你绑定表单提交中的一个按钮的click事件处理程序，因此它是第一次点击时绑定点击事件处理程序，第二次点击它是调用点击处理程序。您可以删除按钮的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()或.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>

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

4 个答案: