Js聊天控制器

我是新來的Javascript（純JavaScript），我是tryiong創建一個聊天控制器應用程序，執行下面的操作。Js聊天控制器

用戶輸入內容。
對我的知識庫進行了一次郵政通話。
服務器響應該消息。

目前，我無法通過點擊按鈕來執行該帖子。

以下是我的代碼。

<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" 
    content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<meta name="description" content="" /> 
<meta name="author" content="" /> 

<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<!--[if IE]> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <![endif]--> 
<title>Bootstrap Chat Box Example</title> 
<!-- BOOTSTRAP CORE STYLE CSS --> 
<link href="assets/css/bootstrap.css" rel="stylesheet" /> 
<!-- FONT AWESOME CSS --> 
<link href="assets/css/font-awesome.css" rel="stylesheet" /> 
<!-- CUSTOM STYLE CSS --> 
<link href="assets/css/style.css" rel="stylesheet" /> 

<script type="text/javascript" src="assets/js/jquery.min.js"></script> 
<script type="text/javascript"> 
    // jQuery Document 

    $(document).keypress(function(e) { 
     if (e.which == 13) { 
      $("#submitmsg").click(); 
     } 
    }); 

    $(document).ready(function() { 
     $('#submitmsg').bind('click', function() { 
      var message = $('#usermsg').val(); 
      $('#chatbox').append('<p>' + message + '</p>'); 
      $('#usermsg').val(''); 
      //alert(message); 

     }); 
    }); 

    function serverResponse(message) { 
     $('#chatbox').append('<p>Server: ' + message + '</p>'); 
    } 

    $("#submitmsg") 
      .click(
        function() { 
         alert("Hi"); 
         var inputtedText = $("#usermsg").val(); 
         var params = {}; 

         var controllerUrl = 'https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer'; 
         $.ajax({ 
          url : controllerUrl, 
          type : 'POST', 
          data : { 
           "question" : inputtedText 
          }, 
          beforeSend : function(xhrObj) { 
           // Request headers 
           xhrObj.setRequestHeader(
             "Ocp-Apim-Subscription-Key", "MyKey"); 
           xhrObj.setRequestHeader('Content-Type', 
             'application/json; charset=UTF-8'); 

          }, 
          success : function(data) { 
           var dataObj = data; 
           alert('Data:' + JSON.stringify(dataObj)); 
           $('#resultvalue').html(data); 
           serverResponse(JSON.stringify(dataObj)); 
           alert(data); 
          } 
         }); 
        }); 
</script> 


</head> 
<body> 

    <nav class="menu"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <div class="back"> 
        <img src="acn.jpg" draggable="false" /> 
       </div> 
       <div class="name">Accenture Compliance</div> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> 
         User Name</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 
         Logout</a></li> 
      </ul> 
     </div> 
    </nav> 
    <br /> 
    <br /> 
    <br /> 
    <div class="container"> 
     <div class="row pad-top pad-bottom"> 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
       <div class="chat-box-new-div"> 
        <div class="chat-box-new-head">Compliance Avatar</div> 
        <div class="panel-body chat-box-new"> 

         <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
         <br /> <br /> <br /> <br /> 

        </div> 
       </div> 
      </div> 
      <div class=" col-lg-6 col-md-6 col-sm-6"> 
       <div class="chat-box-div"> 
        <div class="chat-box-head"> 
         CHAT HISTORY 
         <div class="btn-group pull-right"> 
          <button type="button" class="btn btn-info dropdown-toggle" 
           data-toggle="dropdown" aria-expanded="false"> 
           <span class="fa fa-cogs"></span> <span class="sr-only">Toggle 
            Dropdown</span> 
          </button> 
          <ul class="dropdown-menu" role="menu"> 
          </ul> 
         </div> 
        </div> 
        <div class="panel-body chat-box-main"> 
         <div class="chat-box-left">Hello, Welcome!. You can ask me 
          questions on Compliance Policy ..</div> 
         <div class="chat-box-name-left"> 
          <img src="compiler-bot-static.gif" 
           alt="bootstrap Chat box user image" class="img-circle" /> - Bot 
         </div> 
         <hr class="hr-clas" /> 
         <div class="chat-box-right" id="chatbox"></div> 
         <div class="chat-box-name-right"> 
          <img src="smiley.jpg" alt="bootstrap Chat box user image" 
           class="img-circle" /> - You 
         </div> 

        </div> 
        <div class="chat-box-footer"> 
         <div class="input-group"> 
          <input type="text" class="form-control" 
           placeholder="Enter Text Here..." id="usermsg"> <span 
           class="input-group-btn"> 
           <button class="btn btn-info" type="button" id="submitmsg">SEND</button> 
          </span> 
         </div> 
        </div> 

       </div> 

      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
       <div class="chat-box-new-div"> 
        <div class="chat-box-new-head">Frequently Asked Questions .. 
        </div> 
        <div class="panel-body chat-box-new"> 
         <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
         <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
         <br /> <br /> <br /> 
        </div> 
       </div> 
      </div> 
     </div> 

     <!-- USING SCRIPTS BELOW TO REDUCE THE LOAD TIME --> 
     <!-- CORE JQUERY SCRIPTS FILE --> 
     <script src="assets/js/jquery-1.11.1.js"></script> 
     <!-- CORE BOOTSTRAP SCRIPTS FILE --> 
     <script src="assets/js/bootstrap.js"></script> 
</body> 

</html>

要檢查功能實際上是所謂與否，我添加的("#submitmsg").click(function() {...內的警報，出乎我的意料，它沒有任何警告，這意味着這是沒有得到調用。

請讓我知道我哪裏錯了，我該如何解決這個問題。

謝謝

來源

2017-01-11 user3872094

您是否檢查了控制檯的錯誤？假設你正在進行跨域調用 –

@RoryMcCrossan，我猜你會被SOP阻止，我在控制檯中沒有任何錯誤。 '連接到PORT_NAME_SYMANTEC_PKI_CLIENT_CONTENT_TO_BACKGROUND ... bridge.js：1連接：端口 bridge.js：1完成。 chrome-extension：//ahgdclgdhfeingghldkedleghekbfhef/content/detection.js：1 + content/detection.js chrome-extension：//ahgdclgdhfeingghldkedleghekbfhef/content/detection.js：1 -content/detection.js'是我的控制檯輸出 – user3872094

您的問題是由添加點擊事件偵聽器的時間引起的。

在文檔觸發ready事件之前，DOM元素尚未加載。

爲此JS（jQuery選擇）無法找到「submitmsg」元素添加事件監聽

檢查以下鏈接&代碼

https://jsfiddle.net/f6fv1xvw/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    // maybe alerted [length = 0] because dom element loaded not yet 
    alert("before ready : " + $("#submitmsg").length); 

    $(document).ready(function() { 
     // maybe alerted [length = 1] because dom element loaded completly 
     alert("after ready : " + $("#submitmsg").length); 

     // need to add event listener this timing(after ready) 
     $("#submitmsg").click(function() { 
     alert("Hi"); 
    }); 
    }); 
</script>

，然後再次檢查你的源爲什麼要加載jquery 3次。

// called 1 time in head 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

// called 2 time before body 
<script type="text/javascript" src="assets/js/jquery.min.js"></script> 

// called 3 time in body  
<script src="assets/js/jquery-1.11.1.js"></script>

來源

2017-01-11 08:17:18 easywaru

回答

相關問題