Question

我正在尝试通过id获取并侦听表单标签上的事件，但是jQuery无法正常工作，并且我没有出现任何错误...

var socket = io();

socket.on('connect', function() {
  console.log('connected to server');
});


socket.on('newMessage', function(data) {
  console.log('message', data);
});

socket.on('changeParagraph', function(data) {
  document.getElementsByTagName('h1')[0].innerHTML = data
});

console.log('jQuery:', jQuery("#message-form"));

jQuery("#message-form").on('submit', function(e) {
  e.preventDefault();

  socket.emit('createMessage', {
    from: 'User Q',
    msg: 'test message!'
  });
});

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Chat App</title>
</head>

<body>
  <script src="/js/libs/jquery-3.3.1.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/index.js">
  </script>

  <h1>Welcome to the chat app! :)</h1>
  <form id="message-form">
    <input type="text" name="message" placeholder="Message" />
    <button type="submit">send message</button>
  </form>
</body>

</html>

我在这里缺少什么console.log（jQuery（'＃message-form'））返回一个非常大的对象

w.fn.init {} proto ：对象（0）

和其中的许多其他内容...但不是我想要的形式...

我在这里想念什么？

预先感谢您的回答。

Answer 1

如@jmoerdyk所述，您需要在定义表单后运行jQuery选择器，方法是将代码包含在body标签底部，或者将jquery包装在ready处理程序中，例如：

jQuery(function($) { // runs onready, aliases jQuery as '$' in this func
  $("#message-form").on('submit', function(e) {
    e.preventDefault();

    socket.emit('createMessage', {
      from: 'User Q',
      msg: 'test message!'
    });
  });
});

在控制台日志中看到的是整个jQuery对象，即使它与任何元素都不匹配。

当我尝试通过ID提取标签时，为什么我的jQuery无法正常工作？

1 个答案: