socket.io jquery干扰

时间:2017-07-12 18:45:17

标签: javascript jquery html socket.io

我试图在我的网站上使用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>

1 个答案:

答案 0 :(得分:-1)

我相信包含你的js / libraries / frameworks的正确顺序是:

  1. 插槽
  2. 的jQuery
  3. bootstrap.min.js
  4. app.js(我猜这里是你自己的剧本)
  5. 如果你真的必须,你的inlinescripts(他们不应该在app.js?)