页面同选择器removeButton点击触发两次确认弹窗的解决咨询

页面上存在两个匹配选择器$("div[data-lookup-entity-type=some_type] .js-lookup-clear")的清除按钮（X按钮），点击其中任意一个时，会弹出两次确认对话框。

界面情况 #

• 两个清除按钮分别位于不同区域，样式为X型清除按钮
• 点击按钮后异常：弹出两个相同的确认对话框

绑定事件的代码 #

var removeButton = $("div[data-lookup-entity-type=some_type] .js-lookup-clear");

removeButton.on("click", function () {

    var accessGroupControl = $("div[data-lookup-entity-type=some_type] input[type='hidden']");
    var selectedAccessGroup = accessGroupControl.val();

    if (isStringUndefinedOrNullOrEmpty(selectedAccessGroup)) {

        return true;
    }

    app.confirm.showConfirmation({

        text: "some text",
        caption: "some caption",
        resolveButtonText: "Yes",
        rejectButtonText: "No",
        reverse: true
    }).then(function () {

        removeButton.unbind("click");
        removeButton.click();
    });

    return false;
});

我推测是因为有两个匹配相同选择器的按钮，导致确认对话框被调用两次。曾尝试调整showConfirmation的绑定，虽成功让弹窗只出现一次，但输入元素的值却被莫名清空。请问是否有无需修改HTML的解决方案？或者问题根源是否不在全局showConfirmation函数或其回调本身？

解决方案 #

问题核心原因有两点：

1. 全局选择器操作所有匹配元素：代码中accessGroupControl用全局选择器获取所有匹配的隐藏输入框，而非当前按钮对应的那一个；回调里的removeButton.unbind("click").click()会触发所有按钮的点击事件，而非仅当前点击的按钮。
2. 事件回调误操作集合而非单个元素：单个按钮点击仅触发自身事件，但回调中对整个按钮集合的操作引发了连锁问题。

无需修改HTML的修正方案如下，核心是只处理当前点击的按钮及其关联元素：

var removeButton = $("div[data-lookup-entity-type=some_type] .js-lookup-clear");

removeButton.on("click", function () {
    // 获取当前点击的单个按钮，定位到其所属的父容器
    const $currentBtn = $(this);
    const $parentContainer = $currentBtn.closest("div[data-lookup-entity-type=some_type]");
    // 仅获取当前容器下的隐藏输入框
    const accessGroupControl = $parentContainer.find("input[type='hidden']");
    const selectedAccessGroup = accessGroupControl.val();

    if (isStringUndefinedOrNullOrEmpty(selectedAccessGroup)) {
        return true;
    }

    app.confirm.showConfirmation({
        text: "some text",
        caption: "some caption",
        resolveButtonText: "Yes",
        rejectButtonText: "No",
        reverse: true
    }).then(function () {
        // 仅解绑并触发当前按钮的点击事件
        $currentBtn.off("click").trigger("click");
    });

    return false;
});

关键修正点 #

• 用$(this)指代当前点击的按钮，避免操作整个按钮集合；
• 通过closest方法精准定位当前按钮所属的父容器，确保只读取/操作当前按钮对应的隐藏输入框，不会影响另一个按钮的元素；
• 回调中仅处理当前按钮的解绑和触发，不会触发另一个按钮的点击事件，从根源避免两次弹窗；
• 用jQuery推荐的off替代unbind，trigger("click")比直接click()语义更清晰。

这样修改后，既能解决两次弹窗的问题，也不会误清空其他输入框的值，完全不需要改动HTML结构。

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