Javascript socket.io jquery
我正在尝试在我的站点上使用socket.io，为了让它正常工作，我需要在socket.io脚本标记之后包含jquery脚本标记，但这样做会破坏使用jquery的按钮。如果我颠倒顺序，我所有的按钮都会再次起作用，但我的套接字代码不再起作用。如果有人能帮我实现这两个功能（理想情况下不删除Jquery的用法），我将非常感谢！谢谢Javascript socket.io jquery,javascript,jquery,html,socket.io,Javascript,Jquery,Html,Socket.io,我正在尝试在我的站点上使用socket.io，为了让它正常工作，我需要在socket.io脚本标记之后包含jquery脚本标记，但这样做会破坏使用jquery的按钮。如果我颠倒顺序，我所有的按钮都会再次起作用，但我的套接字代码不再起作用。如果有人能帮我实现这两个功能（理想情况下不删除Jquery的用法），我将非常感谢！谢谢 <html> <head> <link href="/assets/style.css" type="text/css" rel="
<html>
<head>
<link href="/assets/style.css" type="text/css" rel="stylesheet">
<link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon"> <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body> <div class="header"> <a href="/" id="header-title">smashbet.gg</a>
<% if (!locals.user) { %> <form method="POST" action="/login" id="login">
Username: <input type="text" id="username" name="username"></input>
Password: <input type="password" name="password"></input>
<input type="checkbox" name="remember" data-toggle="tooltip" title="Remember Me">
<input type="submit" id="loginButton" value="Login"></input>
</form> <% }else { %>
<form method="POST" action="/logout" id="logout">
<a href="/account/<%= user.username %>" id="welcomeUser">Welcome <%= user.username %></a>
<input type="submit" value="Logout"></input>
</form>
<% } %> </div>
<div class="column-left"> <img src="/assets/images/smashbet1_15.png"></img>
<% if (!locals.user) { %> <a href="#openModal" id="signupButton">Signup!</a> </br>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Sign up!</h2>
<form method="POST" action="/signup" id="signup">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" name="username" class="form-control">
</div>
<span id='message'></span>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" id="password" name="password" class="form-control" onkeyup='check();' />
</div>
<div class="form-group">
<label for="pwd">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control" onkeyup='check();' />
</div><br />
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div> </div>
<% } %>
<% if (locals.tourneyList) { for(var i = 0; i < locals.tourneyList.length; i++) { %>
<div class="tourneyLink">
<a href="/tournament/<%= tourneyList[i].link %>">
<%= locals.tourneyList[i].name %>
</a>
<br />
</div>
<% } } %> </div>
<div class="column-center"> <iframe src="http://player.twitch.tv/?channel=<%= tourneyLink %>" height="740" width="1310" frameborder="0" scrolling="no" allowfullscreen="true"> </iframe>
<div class="bet-area">
<form method="POST" action="/bet" id="placeBet">
<% if (locals.user) { %>
<p>Total Funds: $
<%= user.wallet %>
</p>
<p id="currentBet">Current Bet: $
<%= user.bet %>
<% if(user.player !== "") { %>on
<%= user.player %>
<% } %>
</p>
Bet: <input type="number" name="bet" min="1" max="<%= user.wallet %>">
<br />
<br />
<button type="submit" value="Player 1" name="placeBetButton" id="placeBetButton1">Player 1</button>
<button type="submit" value="Player 2" name="placeBetButton">Player 2</button>
<% } %> </form>
</div> </div>
<div class="column-right"> <iframe frameborder="0" scrolling="no" id="chat_embed" src="http://www.twitch.tv/<%= tourneyLink %>/chat" height="925" width="305"> </iframe> </div>
<br />
<script src="/assets/js/app.js"></script> <script> $(document).on('submit', '#placeBet', function (e) { e.preventDefault(); $.post('/bet', $(this).serialize() + '&' + $.param({ placeBetButton: $(document.activeElement).val(), tourneyLink: '<%= tourneyLink %>' }),
function (data) {
$('#currentBet').html("Current bet: $" + data.bet + " on " + data.player);
// 'data' contains the response from the request
}).error(function () {
});
return false; });
var check = function () { if (document.getElementById('password').value == document.getElementById('confirmPassword').value) {
document.getElementById('message').style.color = 'cyan';
document.getElementById('message').innerHTML = 'Passwords Match!'; } else {
document.getElementById('message').style.color = 'yellow';
document.getElementById('message').innerHTML = 'Passwords Don\'t Match'; } } </script>
<script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { var socket = io(); socket.on('test message', function(msg) {
$('#placeBetButton1').html(msg);
}); $('form').submit(function () {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false; }); });
</script> </body>
</html>
用户名：
密码：
注册
用户名：
密码：
确认密码：
提交
资金总额：$
当前下注：$
在…上
打赌：
玩家1
玩家2
$（document）.on（'submit'，'#placeBet'，function（e）{e.preventDefault（）；$.post（'/bet'，$（this.serialize（）+'）和'+$.param（{placeBetButton:$（document.activeElement）.val（），tourneyLink:'}），
功能（数据）{
$（'#currentBet'）.html（“当前赌注：$”+data.bet+“on”+data.player）；
//“数据”包含来自请求的响应
}).错误（函数（）{
});
返回false；}）；
var check=function（）{if（document.getElementById（'password'）。value==document.getElementById（'confirmPassword'）。value）{
document.getElementById（'message'）.style.color='cyan'；
document.getElementById（'message'）.innerHTML='Passwords Match！'；}else{
document.getElementById（'message'）.style.color='yellow'；
document.getElementById（'message'）.innerHTML='密码不匹配'；}
$（函数（）{var socket=io（）；socket.on（'test message'，函数（msg）{
$（'#placeBetButton1'）.html（msg）；
})；$（'form'）。提交（函数（）{
emit（'chat message'，$（'#m'）.val（））；
$（'m'）.val（''）；
返回false；}）；}）；
我应该指定，我知道我现在包含了两次Jquery，根据我删除的内容不同，它的破坏方式也不同。显然，在使用Jquery之前必须包含它。所以，首先要这样做。没有其他选择会起作用。没有理由考虑其他的选择。干涉到底是什么意思？它以什么方式干扰？（它不起作用。它不够好。为什么不起作用？）当我添加socket.io（首先）时，页面上的所有按钮都不再起作用。它们都是我在节点中间件中处理的提交按钮，但单击时它们完全不起任何作用。我想我需要关注的是，在Jquery之后添加的套接字不起作用。为什么它们不起作用呢？事件是否没有发生？处理程序内部是否有东西抛出错误？做一些调试。