テキストエリアとモーダルがモバイルで動作していません

Question

修理工場のチケットシステムを用意しています。缶入りの応答で修理のステータスを更新するオプションがあります。ボタンをクリックすると、缶詰の応答オプション付きのモーダルが開き、挿入をクリックすると、ボタンの下のテキストエリアに応答が挿入されます。すべてがデスクトップ上で動作するはずですが、モバイルでは、缶詰応答のボタンはクリックできず、テキストエリアもクリックできません。

ボタンとテキストエリア：

<div class="col-xs-12"> 
     <div class="form-group"> 
      <label for="message">Status Update Message: 
      <button type="button" class="btn btn-secondary text-left" data-toggle="modal" data-target="#myModal"><i class="fa fa-file-text" aria-hidden="true"></i></button></label> 
      <textarea class="form-control" required rows="8" maxlength="750" name="message" id="message"></textarea> 
     </div> 
    </div> 

モーダル：挿入するための

<div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
     <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Canned Responses</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="col-xs-12"> 
        <div class="col-xs-3"> 
        <p>Diagnosing</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Dingmess">Hi, Thanks for coming in. We are currently diagnosing your machine...</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Diagnosing"class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <br> 
        <div class="col-xs-3"> 
        <p>Diagnosis</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Dmess">Hi, We took a look at your device, and the issue is *. It will be $...</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Diagnosis" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <br> 
        <div class="col-xs-3"> 
        <p>Repair Approved</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Appmess">Thanks for your approval. We will proceed with the fix and let you know when it's ready to pick...</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Approved" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <div class="col-xs-3"> 
        <p>Repair Declined</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Decmess">Your repair has been marked as declined. Please let us know...</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Declined" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <br> 
        <div class="col-xs-3"> 
        <p>Parts Ordered</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Partmess">Parts have been ordered. We will notify you when we begin...</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Parts" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <br> 
        <div class="col-xs-3"> 
        <p>In Progress</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Progmess">Your repair is in progress. We will notify you when complete</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Progress" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <br> 
        <div class="col-xs-3"> 
        <p>Completed</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Compmess">Your repairs are complete, and your device is ready!</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Completed" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        <br> 
        <div class="col-xs-3"> 
        <p>Closed/Invoiced</p> 
        </div> 
        <div class="col-xs-7"> 
        <p id="Closedmess">The ticket has been closed. Thank you.</p> 
        </div> 
        <div class="col-xs-2"> 
        <button type="button" id="Closed" class="btn btn-default" data-dismiss="modal">Insert</button> 
        </div> 
        </div> 
       </div> 
        <div class="modal-footer"> 
         <div class="col-xs-12"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
      </div> 
     </div> 
</div> 

Javascriptを：それは文句を言わない、携帯に取り組む理由として

$(document).ready(function(){ 
    $("#Diagnosing").click(function(){ 
     $('#message').html('Hi, Thanks for coming in! We are currently diagnosing your machine. We\'ll let you know what the issue is as soon as we finish.'); 
    }); 
    $("#Diagnosis").click(function(){ 
     $('#message').html('Hi, We took a look at your device, and the issue is *. It will be $ +tax to repair. Shall we proceed with the fix?'); 
    }); 
    $("#Approved").click(function(){ 
     $('#message').html('Your device has been marked as approved! We will proceed with the fix and let you know when it\'s ready to be picked up!'); 
    }); 
    $("#Declined").click(function(){ 
     $('#message').html('Your repair has been marked as declined. Please let us know if there is anything we can do to change your mind!'); 
    }); 
    $("#Parts").click(function(){ 
     $('#message').html('Your parts have been ordered. We will let you know when we receive the parts and begin installing them.'); 
    }); 
    $("#Progress").click(function(){ 
     $('#message').html('We are currently working on your repair. We will notify you when it is done!'); 
    }); 
    $("#Completed").click(function(){ 
     $('#message').html('Hey there - your repair is all set! We just finished cleaning it up so you can come pick it up and pay at your earliest convenience. We *** and tested ***.'); 
    }); 
    $("#Closed").click(function(){ 
     $('#message').html('The ticket has been closed. Thank you.'); 
    }); 
}); 

任意の考え？私は1時間ほどを探しましたが、同じ問題を抱えている人は見つかりませんでした。

Answer 1

このコードは私の仕事です。スクリプトの順序とバージョンが以下の通りであることを確認したいと考えています。

<script type="text/javascript" src="scripts/jquery-2.2.3.js"></script> 
    <script type="text/javascript" src="scripts/bootstrap4.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#Diagnosing").click(function(){ 
      $('#message').html('Hi, Thanks for coming in! We are currently diagnosing your machine. We\'ll let you know what the issue is as soon as we finish.'); 
     }); 
    ........ 
    </script> 
</body>