使用TailwindCSS和Preline的Alert系统关闭按钮失效问题求助

问题背景 #

基于TailwindCSS和Preline开发Alert通知系统，通过JavaScript动态添加Alert元素（如登录错误提示）后，依赖Preline插件的关闭按钮无法触发关闭功能。原因是Preline在页面加载时仅初始化已存在的元素，动态新增的元素未被插件注册。

现有代码 #

function notification(type, msg) {
    let popups = { ["error"]: `
    <div id="dismiss-alert" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 text-sm text-teal-800 rounded-lg p-4 dark:bg-teal-800/10 dark:border-teal-900 dark:text-teal-500" role="alert">
        <div class="flex">
            <div class="flex-shrink-0">
            <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
            </div>
            <div class="ms-2">
            <div class="text-sm font-medium">
                File has been successfully uploaded.
            </div>
            </div>
            <div class="ps-3 ms-auto">
            <div class="-mx-1.5 -my-1.5">
                <button type="button" class="inline-flex bg-teal-50 rounded-lg p-1.5 text-teal-500 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-teal-50 focus:ring-teal-600 dark:bg-transparent dark:hover:bg-teal-800/50 dark:text-teal-600" data-hs-remove-element="#dismiss-alert">
                <span class="sr-only">Dismiss</span>
                <svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                </button>
            </div>
            </div>
        </div>
    </div>
    `
    } 
    $("#notifs").append(popups[type]);
}

解决方案 #

1. 修复ID冲突问题 #

原代码中所有Alert共用同一个id="dismiss-alert"，会导致选择器冲突，需为每个动态生成的Alert创建唯一ID。

2. 手动初始化Preline插件 #

动态添加元素后，调用Preline的HSRemoveElement.init()方法，注册新增的Alert元素，让关闭按钮绑定功能。

修改后的代码 #

function notification(type, msg) {
    // 生成唯一ID，避免多个Alert冲突
    const alertUniqueId = `dismiss-alert-${Date.now()}`;
    
    let popups = { 
        "error": `
        <div id="${alertUniqueId}" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-red-50 border border-red-200 text-sm text-red-800 rounded-lg p-4 dark:bg-red-800/10 dark:border-red-900 dark:text-red-500" role="alert">
            <div class="flex">
                <div class="flex-shrink-0">
                <svg class="flex-shrink-0 h-4 w-4 text-red-600 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                </div>
                <div class="ms-2">
                <div class="text-sm font-medium">
                    ${msg}
                </div>
                </div>
                <div class="ps-3 ms-auto">
                <div class="-mx-1.5 -my-1.5">
                    <button type="button" class="inline-flex bg-red-50 rounded-lg p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:bg-transparent dark:hover:bg-red-800/50 dark:text-red-600" data-hs-remove-element="#${alertUniqueId}">
                    <span class="sr-only">Dismiss</span>
                    <svg class="flex-shrink-0 h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                    </button>
                </div>
                </div>
            </div>
        </div>
        `
    };

    $("#notifs").append(popups[type]);
    // 手动初始化新增Alert的移除插件
    HSRemoveElement.init(`#${alertUniqueId}`);
}

关键说明 #

• 唯一ID：用Date.now()生成唯一标识，确保每个Alert的ID不重复，避免选择器混乱。
• 插件初始化：HSRemoveElement.init()是Preline移除元素插件的初始化方法，传入目标Alert的选择器后，插件会为关闭按钮绑定点击事件，并保留原有的过渡动画效果。
• 样式优化：将error类型的Alert样式改为红色系，更符合错误提示的视觉预期，同时把固定文本替换为传入的msg参数，让通知内容动态化。

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