2016-07-07 100 views
0

我正在爲維修店製作一個票務系統,並帶有一個選項,可以通過預先設置的響應來更新修復狀態。你可以點擊一個按鈕,它會打開一個帶有預設回覆選項的模式,點擊插入,然後它將響應插入到按鈕下面的textarea中。一切工作,因爲它應該在桌面上,但是,在手機上,用於預設迴應的按鈕不可點擊,並且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.'); 
    }); 
}); 

任何想法,爲什麼它不會在移動設備上工作?我查了一個小時左右,我還沒有找到任何人有同樣的問題。

+0

我看不到移動版上的腳本有任何問題。 https://jsfiddle.net/michaelyuen/qyrc0zx3/1/ –

回答

0

此代碼適用於我。我會確保我的腳本按以下順序和版本:

<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> 
+0

你是如何測試手機上的按鈕的? jsfiddle什麼的? –

+0

我有一個ftp服務器。該功能在iOS 9.3.2上按預期工作。 – Mosby42

+0

android?如果你沒有Android設備,我可以測試它的網址 –

相關問題