JavaScript追加数据时data-url赋值与关闭按钮异常问题

问题1：data-url属性未正确填充value.id #

原因 #

Blade模板的{{ route(...) }}是服务端渲染语法，无法识别客户端JS中的value.id变量。直接在路由语法中拼接'+value.id+'会被服务端当作字符串处理，最终生成的URL会保留+value.id+文本，而非实际的ID值。

解决方法 #

先在服务端生成带占位符的删除路由模板，再在客户端JS中用value.id替换占位符：

1. 定义路由模板变量：var deleteRouteTemplate = "{{ route('list.delete', ':id') }}";
2. 生成实际删除URL：deleteRouteTemplate.replace(':id', value.id)

问题2：关闭按钮显示“times;”而非关闭图标 #

原因 #

关闭图标需要HTML实体×来渲染成×，代码中仅写了times;，缺少开头的&，导致浏览器无法识别为实体字符，直接显示原始文本。

解决方法 #

将span标签内容改为转义后的实体×（JS字符串中需转义&为&，渲染后才能得到×）。

修改后的完整代码片段 #

success: function(response)
{
    // 预加载带占位符的删除路由模板
    var deleteRouteTemplate = "{{ route('list.delete', ':id') }}";
    
    $.each(response, function () {
        $.each(this, function (index, value) {
            // 动态计算alert样式类
            var alertClass = value.linkValue === 0 ? 'alert-danger' : 'alert-success';
            // 生成最终的删除URL
            var deleteUrl = deleteRouteTemplate.replace(':id', value.id);
            
            $('#List').append('' +
                '<div class="col-md-12"><div  class="alert ' + alertClass + '">'+ value.item +
                '<button data-id='+value.id+' data-token="{{ csrf_token() }}" data-url="' + deleteUrl + '" type="button" class="close cls-btn" data-dismiss="alert"><span aria-hidden="true">×</span></button>'+
                '</div>'+
                '</div>'
            );
        });
    });
},

额外优化点 #

把原来混合在字符串中的Blade条件判断（@if(...)）移到JS中处理，避免服务端语法和客户端逻辑混淆，代码更易维护。

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