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

Question

I have a button that uses Ajax and JavaScript to send info to the database. It works fine on Chrome and on Android (my Galaxy Note 8). But the weird thing is, I used the exact same syntax (but different function) for another button, and that worked on every device. Help!!

I've tried changing the .click(function) to .on('click touchstart') in case the click wasn't being registered on mobile, but that wasn't it. I've also tried replacing the function with just a simple alert, but the button click still wasn't being registered. It's weird because I have another button with the same properties but it works perfectly fine!

here is my code:

$('#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 } 
        }); 
    } 
}); 

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

(different file named "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); 
?>}

This is the code for the button that works across all devices:

$('#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);
    }
});

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