提交時的jQuery不起作用

Question

我知道已經問過那種問題，但是我找不到解決方案。 在我的HTML文件中，我有以下代碼：

<div>
        <form id="chart-input">
            <input type="text" name="country" placeholder="Country" autocomplete="off">
            <input type="number" name="visits" placeholder="Visits" autocomplete="off"> 
            <button>Send</button>
        </form>
</div>

我嘗試使用jQuery處理此表單的提交，但似乎不起作用。

這是我的js文件：

jQuery('#chart-input').on('submit', function (e) {
  e.preventDefault();

  let countryTextbox = jQuery('[name=country]');
  let visitsTextbox = jQuery('[name=visits]');


    socket.emit('addData', {
      "country": countryTextbox,
      "visits": visitsTextbox
    }); 
});

有什么問題？ 當我單擊按鈕preventDefault() ，其他代碼未執行。 希望任何人都知道解決方案。 謝謝

Answer 1

將<button>Send</button>更改為<button type="submit">Send</button> ，它將起作用

Answer 2

確保您已注冊jQuery並按照以下步驟操作：

將javaScript代碼放在HTML后面，或將其更改為：

jQuery(document).ready(function(){
    jQuery('#chart-input').on('submit', function (e) {
          e.preventDefault();

          let countryTextbox = jQuery('[name=country]');
          let visitsTextbox = jQuery('[name=visits]');

          socket.emit('addData', {
            "country": countryTextbox,
            "visits": visitsTextbox
          }); 
    });
});

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <form id="chart-input"> <input type="text" name="country" placeholder="Country" autocomplete="off"> <input type="number" name="visits" placeholder="Visits" autocomplete="off"> <button>Send</button> </form> <script> jQuery(document).ready(function() { jQuery('#chart-input').on('submit', function(e) { e.preventDefault(); let countryTextbox = jQuery('[name=country]'); let visitsTextbox = jQuery('[name=visits]'); //socket.emit('addData', { // "country": countryTextbox, // "visits": visitsTextbox //}); alert('it works!!!'); }); }); </script>