Textarea 和 modal 无法在移动设备上运行

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

关于为什么它不能在移动设备上运行有什么想法吗？我已经找了一个小时左右，我还没有发现任何人有同样的问题。

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>