javascript - HTML/Javascript 按钮在 Safari（iPhone、macbook）中不起作用，但在其他浏览器（Chrome 和三星 Internet）中起作用

Question

我有一个使用 Ajax 和 JavaScript 将信息发送到数据库的按钮。它在 Chrome 和 Android（我的 Galaxy Note 8）上运行良好。但奇怪的是，我对另一个按钮使用了完全相同的语法（但功能不同），并且在每个设备上都有效。帮助！！

如果点击未在移动设备上注册，我尝试将其更改为.click(function)，但事实并非如此。.on('click touchstart')我也尝试用一个简单的警报替换该功能，但按钮点击仍然没有被注册。这很奇怪，因为我有另一个具有相同属性的按钮，但它工作得非常好！

这是我的代码：

JS：

$('#sendBtn').click(function(e) { 
    if ($.trim($('#message').val()).length > 0) {     
        var message = $("#message").val(); 
        $('input[name=message').val(''); 
        $.ajax({ 
            url: 'includes/sendChat.inc.php', 
            type: 'POST', data: { umessage: message } 
        }); 
    } 
}); 

HTML：

<div class="container"> 
    <div id="messagecon"> 
        <h3 id="msghead">Community</h3> 
            <div id="chatBox"> 
                <div id="chatDisplay"></div> 
            </div> 
            <input type="text" name="message" id="message" placeholder="Say something"><br> 
        <button type="button" style="z-index: 99;" id="sendBtn">Send</button> 
    </div> 
</div> 

（名为“sendChat.inc.php”的不同文件）

<?php 
session_start(); 
include ("dbh.inc.php"); $idUser = $_SESSION['userId']; 
$nameUser = $_SESSION['accName']; 
$umessage = $_POST['umessage']; 
date_default_timezone_set('America/Chicago'); 
$date = date("Y-m-d H:i:s"); 
$query = "INSERT INTO chat 
    (user,message,name,time) VALUES ('$idUser','$umessage','$nameUser','$date')"; 
$run = mysqli_query($conn, $query); 
?>}

这是适用于所有设备的按钮的代码：

JS：

$('#addnewbtn').click(function(e) {                 
    if ($.trim($('#addInput').val()).length > 0) {
        var todoText = $("#addInput").val();
        $('input[name=task]').val('');
        $('.scrollpanel').append('<li class="item">'+todoText+'<span style="float: right;"><div class="overlay"><input type="checkbox" class="markdone"></input><img class="trash" src="images/trash.png"/></div></span></li>');
        $.ajax({
            url: "includes/add.inc.php",
            method: "POST",
            data: { task: todoText }
        });
        setTimeout(displayList, 100);
    }
});

HTML：

<div id="todolist">
    <h1 class="header">To Do</h1>
    <ul class="tasks">
        <div id="displayList"></div>
    </ul>
    <div class="addnew">
        <input type="text" name="task" placeholder="Add a new task" class="input" id="addInput" autocomplete="off" required="true">
        <button type="button" style="z-index: 99;"class="submit" id="addnewbtn">Add</button>
    </div>
</div>

标签： javascriptjqueryhtmlcssajax