我试图在我的网站上使用socket.io,为了让它正常工作,我需要在我的socket.io脚本标记之后包含我的jquery脚本标记,但这样做会破坏我正在使用的按钮jQuery的。如果我反转命令,我的所有按钮再次起作用,但我的套接字代码不再起作用。如果有人可以帮我两个工作(理想情况下没有删除Jquery使用),我非常感谢!谢谢!
<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>
答案 0 :(得分:-1)
我相信包含你的js / libraries / frameworks的正确顺序是: