javascript - 关闭和打开 jquery popUps 添加多个按钮

Question

使用 Jquery popUp iv 在标题栏上的“X”按钮旁边添加了一个帮助图标。问题是，当我关闭弹出窗口并再次打开它时，有 2 个帮助图标，关闭和打开，还有 3 个……等等……

我可以将显示设置为无，这会删除它，但是下次打开弹出窗口时会有 2 个手形图标...试过:

    <script>
    $('#helpIconBtn').removeClass(".ui-dialog-titlebar");
    $('.helpIconBtn').removeClass(".ui-dialog-titlebar");
    $('#iconhelp').removeClass(".ui-dialog-titlebar");
    $('#iconhelp').removeClass(".helpIconBtn");
    // $('#iconhelp').css('display', 'none');
    //$(".iconhelp").removeClass
     //  $(".iconhelp").classList.remove(".ui-dialog-titlebar");
     $("iconhelp").removeClass("helpIconBtn");
     $("iconhelp").removeClass(".ui-dialog-titlebar");
    </script>

代码:

var floater_style_feature_panel_popup = $("#floater_Style_Features_Panel_popup");


                floater_style_feature_panel_popup.dialog({
                    resizable: false
                },
                    { width: "auto" },
                    { height: "auto" },
                     { position: { my: "top+45", at: "bottom", of: $("header")} },
                    { show: { effect: "slideDown"} },
                    {dialogClass: "helpIconBtn"},
                    { hide: true },
                    { open: function (event, ui) {
                        floater_style_feature_panel_popup[0].parentNode.classList.add("opaqueDialog");

                        ResizeStylerDialog();
                    }
                    },
                    { beforeClose: function (event, ui) {

                        if (closeFeatureStyler == false) {
                            var funcParamCall = { "funcParam": [{ "funcName": "OnFeatureStylePreClose()"}] };

                            $$("FeatureStyler")[0].contentWindow.postMessage(JSON.stringify(funcParamCall), "*");
                            alert("false");
                            return false;
                        }
                        else {
                            alert("true");
                            //$('#iconhelp').removeClass(".ui-dialog-titlebar");
                            //$('#helpIconBtn').removeClass(".ui-dialog-titlebar");
                            //$('.helpIconBtn').removeClass(".ui-dialog-titlebar");
                           // $('#iconhelp').removeClass(".helpIconBtn");
                            // $('#iconhelp').css('display', 'none');
                            // $('#iconhelp').css('display', 'none');
                            // $(".iconhelp").classList.remove(".ui-dialog-titlebar");
                            //$("iconhelp").removeClass("helpIconBtn");
                            //$("iconhelp").removeClass(".ui-dialog-titlebar");
                            return true;
                        }
                    }
                    },
                    { closeOnEscape: true
                    }).parent().appendTo("form:first");

                $(".helpIconBtn").children(".ui-dialog-titlebar").append("<span id='iconhelp' class='ui-icon ui-icon-help'></span>");

                $("#iconhelp").click(function () {
                   alert('help');

                });


#iconhelp{
    cursor: pointer;
    float: right;
    margin-right:15px;
    margin-top: 1px;
    background-color: #EEEEEE;
    width: 18px;
    height: 20px;
    border-radius:4px;
}

Answer 1

很可能您在每次用户打开弹出窗口时附加图标，并在弹出窗口关闭期间删除它的类。只需检查您是否有超过一个带有“iconhelp”id 的跨度。

如果是这样，您可以通过两种不同的方式修复它:

1. 在弹出窗口关闭时删除跨度:

   $('#iconhelp').remove();

2. 与其每次都附加跨度，不如让它成为永久性的，只需在其中添加和删除类即可。

如果您采用第一种方法，请不要忘记更改以下内容:

$("#iconhelp").click(function () {
    alert('help');
});

到:

$(document).on("click", "#iconhelp", function () {
    alert('help');
});