Textarea和模式不能在移动设备上工作

Question

我正在为维修店制作一个票务系统，并带有一个选项，可以通过预先设置的响应来更新修复状态。你可以点击一个按钮，它会打开一个带有预设回复选项的模式，点击插入，然后它将响应插入到按钮下面的textarea中。一切工作，因为它应该在桌面上，但是，在手机上，用于预设回应的按钮不可点击，并且textarea也不能被点击。

按钮和文本区域：

<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.'); 
    }); 
}); 

任何想法，为什么它不会在移动设备上工作？我查了一个小时左右，我还没有找到任何人有同样的问题。

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>