Semantic-UI：通配符选择器添加.api及元素事件触发异常排查

你遇到的核心问题是没有正确定位到当前点击的那个按钮对应的目标元素，导致操作逻辑作用到了所有匹配选择器的元素上。下面给你几个实用的解决方案：

1. 通过ID后缀关联目标元素（适合已有ID命名规则的场景） #

如果你的unbind_xxx按钮和对应的element_xxx元素是通过ID后缀关联的（比如unbind_1对应element_1），可以直接从当前点击按钮的ID里提取后缀，精准定位目标元素：

$(document).on('click','[id^=unbind_]', function(){
    // 获取当前被点击的按钮
    const $currentBtn = $(this);
    // 从ID中拆分出后缀（比如从"unbind_2"拿到"2"）
    const itemSuffix = $currentBtn.attr('id').split('_')[1];
    // 精准匹配对应的目标元素
    const $targetElement = $(`#element_${itemSuffix}`);

    // 接下来只针对$targetElement执行你的逻辑
    // 比如之前的perm变量获取、Semantic-UI API调用等操作
    var perm = $targetElement.data('perm'); // 示例：从目标元素取数据
    // 执行你的业务逻辑，比如调用Semantic-UI的方法
    $targetElement.someSemanticMethod(perm);
});

2. 用data属性关联（更优雅的方案） #

相比拆分ID，用HTML的data-*属性直接绑定目标元素的选择器，代码可读性和维护性更好：

首先给按钮添加data-target属性：

<button id="unbind_1" data-target="#element_1">解除绑定</button>
<button id="unbind_2" data-target="#element_2">解除绑定</button>

<div id="element_1">...</div>
<div id="element_2">...</div>

然后在JS里直接读取这个属性定位目标：

$(document).on('click','[id^=unbind_]', function(){
    const $currentBtn = $(this);
    // 从data属性拿到目标元素的选择器
    const targetSelector = $currentBtn.data('target');
    const $targetElement = $(targetSelector);

    // 针对$targetElement执行后续逻辑即可
});

3. 检查事件冒泡（可选） #

如果你的页面里有嵌套的同选择器元素，可能会因为事件冒泡导致误触发，可以在事件处理函数里阻止冒泡：

$(document).on('click','[id^=unbind_]', function(event){
    // 阻止事件向上冒泡，避免触发父元素的同类型事件
    event.stopPropagation();
    
    const $currentBtn = $(this);
    // 后续定位和逻辑操作...
});

总结一下：核心就是用$(this)获取当前触发事件的按钮，再基于这个按钮精准关联到对应的目标元素，而不是直接用全局选择器操作所有匹配元素。

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