Laravel中按钮点击触发WhatsApp函数失效问题求助

我们团队负责的项目中，WhatsApp按钮点击后无法触发对应的函数，此前负责开发的成员已离职。我仅具备Laravel基础，恳请协助排查解决。

按钮HTML代码 #

<div class="modal-footer">
    <button class="btn btn-primary" data-bs-target="#exampleModalToggle"
        data-bs-toggle="modal">Back to first</button>
    <button class="btn btn-success" id="whatsapp-btn">Whatsapp</button>
    <button class="btn" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>

对应的JavaScript函数 #

// whatsapp btn
$('#whatsapp-btn').on('click', function() {
    var message = '';
    $('.checkout-table tr').each(function(i, el) {
        var product = $(el).find('td:first-child').text();
        var qty = $(el).find('input').val();
        message += 'product=  ' + product + 'qty=  ' + qty + ' </br> ';
    })

    var order_type = $('#order_type').val();
    message += 'order type=  ' + order_type + '  ';
    message += '%0a name : ' + $('#name').val();
    message += '%0a email : ' + $('#email').val();
    message += '%0a phone : ' + $('#phone').val();
    message += '%0a instructions : ' + $('#instructions').val();
    var url = 'https://api.whatsapp.com/send?phone=+827667306&text=' + message;
    window.open(url, '_blank');
})

排查解决步骤 #

• 检查jQuery加载状态：代码依赖$语法，打开浏览器控制台（F12）输入$，若返回函数则加载正常；若报错，需确保jQuery在该JS代码之前引入。
• 确认事件绑定时机：如果按钮是动态渲染的，原代码的直接绑定会失效。改为事件委托：$(document).on('click', '#whatsapp-btn', function() { ... })，或者把代码放在$(document).ready()回调内。
• 查看控制台报错：点击按钮后切换到Console标签，查看是否有红色报错（比如找不到checkout-table、order_type等元素），根据报错定位问题。
• 验证事件是否触发：在函数开头添加console.log('按钮已点击')，点击按钮后看控制台是否输出，判断事件是否被触发。
• 检查URL格式：若事件触发但未打开链接，输出message和url变量，确认消息中的特殊字符是否导致URL失效，可使用encodeURIComponent(message)对消息内容进行编码。

内容的提问来源于stack exchange，提问作者michael john