2017-03-06 70 views
2

我有一個表格內提交按鈕喜歡 -提交按鈕不起作用首先點擊

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>

,任何東西都工作正常,但上面的按鈕不起作用在第一次點擊。我怎樣才能擺脫這個問題?

+1

你在哪裏叫那個按鈕點擊,我找不到任何匹配你的HTML和jQuery的東西在一起。您在'submit'事件中似乎也有一個'click'事件 –

+0

不應該根據您的代碼調用此函數 –

+0

我已編輯代碼按鈕ID不正確 – user7597883

回答

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

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

註冊爲

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

因爲,在你的代碼要註冊在$("#VEGAS").submit()因此$('#One').click()註冊的$('#One').click()$("#VEGAS").submit()被調用的第一次。因此,在第一次嘗試中,這不起作用,但在第二次嘗試中起作用。

2

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,這將是相同的,然後這是完全錯誤的。要麼他們隱蔽上課或各一

給不同的ID檢查您的瀏覽器開發者控制檯來查看哪些提出的所有錯誤和糾正所有這些

+0

親愛的我在#Vegas窗體中使用不同的ID具有不同的按鈕。 – user7597883

+0

@Learner相應地更改上面的代碼。 (把你想要的ID在那裏或使用表格提交) –

3

試試這個:你要綁定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'); 
         } 
        }); 
      }); 
+0

我會說'onsubmit'比'click'更有意義 –

+0

雖然我的表單上有多個按鈕? – user7597883

+0

具有相同ID的多個按鈕?或多個按鈕提交相同的表單? –

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