JS模拟a元素点击时隐藏input值修改不生效问题求助

安全阿岳

2026-10-4

问题原因

新创建的带data-toggle属性的a标签未插入DOM树，大部分基于事件委托实现的data-*属性交互逻辑（如Bootstrap自带逻辑、项目自定义点击事件）都绑定在body、document等上层节点，不在DOM内的元素触发的点击事件不会向上冒泡，对应处理逻辑无法触发，或走了旧数据的缓存逻辑。
用原生JS修改input的value后，如果项目使用了jQuery的缓存逻辑，foo2中通过jQuery的val()方法读取时可能拿到缓存的旧值。

修复方案

替换为以下myfoo函数即可：

function myfoo() {
    var xxx = '{"contact_email":"new_email@email.com","basic_pckg":"ok"}';
    // 和foo2的jQuery取值方式保持一致赋值，避免缓存不同步
    $('#data_set').val(xxx);

    const _a_link = document.createElement("a");
    _a_link.className= "actionButton";
    _a_link.setAttribute("role", "button");
    _a_link.setAttribute("data-close-location", "center");
    _a_link.setAttribute("data-container", "body");
    _a_link.setAttribute("data-toggle", "data_set");
    
    // 临时插入DOM保证事件正常冒泡
    document.body.appendChild(_a_link);
    _a_link.click();
    // 点击后移除临时元素
    _a_link.remove();
}