向jQuery函数传递多个参数时函数无法执行，求原因及解决办法

你遇到的问题根源很明确：渲染后的JavaScript代码存在语法错误，导致函数根本无法被正确调用。

先看你提供的渲染后按钮代码：

<input type="button" name="edit" value="Edit" onclick="takeId(1," 06:00:00.0000,="" 07:00:00.0000,="" 2023-01-05,="" ,="" 0)=""" id="1">

能看到onclick里的参数完全乱了——像时间、日期这类字符串值没有被引号包裹，浏览器解析时会把06:00:00.0000当成无效的JavaScript标识符，直接抛出语法错误，函数自然不会执行。而只传一个数字参数时，数字不需要引号，语法是正确的，所以函数能正常运行。

下面给你两种解决方案：

方案1：修正内联onclick的参数引号 #

在PHP输出时，必须给字符串类型的参数包裹引号（注意转义避免冲突）。修改你的PHP代码：

echo "<td><input type='button' name='edit' value='Edit' onclick='takeId($newButtonId, \"$startTime\", \"$endTime\", \"$date\", \"$note\")' id='1'></td>";

这里因为onclick用了单引号包裹，所以内部的字符串参数用转义的双引号\"来包裹，确保渲染后生成正确的JavaScript代码。

渲染后的正确onclick应该是：

onclick="takeId(1, '06:00:00.0000', '07:00:00.0000', '2023-01-05', '')"

方案2：用jQuery事件绑定替代内联onclick（更推荐） #

内联事件容易出现引号冲突、难以维护的问题，推荐用jQuery的事件绑定+data-*属性来传递参数，代码更清晰：

第一步：修改PHP输出，给按钮加类和数据属性 #

echo "<td><input type='button' name='edit' value='Edit' class='edit-btn' data-id='$newButtonId' data-start='$startTime' data-end='$endTime' data-date='$date' data-note='$note' id='1'></td>";

第二步：编写jQuery事件处理代码 #

$(document).ready(function() {
    $('.edit-btn').on('click', function() {
        $('#myModal').modal('show');
        try {
            // 从data属性中获取参数
            const btnId = $(this).data('id');
            const startTime = $(this).data('start');
            const endTime = $(this).data('end');
            const date = $(this).data('date');
            const note = $(this).data('note');

            // 用.val()设置表单值（比.attr('value', ...)更可靠）
            $('#bookingIdHidden').val(btnId);
            $('#timeStart').val(startTime);
            $('#timeEnd').val(endTime);
            $('#date').val(date);
            $('#note').val(note);
        } catch(err) {
            alert(err); 
        }
    });
});

这里还要注意：设置表单元素的值时，jQuery的.val()方法是专门做这件事的，比.attr('value', ...)更稳定，尤其是处理动态更新的场景。

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