关闭并打开jquery popUps添加多个按钮

时间:2015-07-06 15:13:35

标签: javascript jquery html css asp.net

使用Jquery popUp iv在标题栏的“X”按钮旁边添加了一个帮助图标。问题是,当我关闭popUp并再次打开它有2个帮助图标,关闭和打开,有3 ...等等....

我可以将显示设置为none,将其删除,但下次打开popUp时会有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;
}

2 个答案:

答案 0 :(得分:3)

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

如果是这样,您可以通过两种不同的方式解决它:

  1. 删除弹出窗口中的范围:

    $( '#iconhelp')除去();

  2. 不是每次都附加跨度,而是让它永久化,只需添加和删除它。

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

    public class CacheService {
      private final Cache<Foo> fooCache;
      private final Cache<Bar> barCache;
      // and so on
    
      private abstract class Cache<T> {
        private final AtomicBoolean updateGuard = new AtomicBoolean(false);
        private final Semaphore updateWait = new Semaphore(Integer.MAX_VALUE);
    
        private volatile boolean isValid = true;
        private volatile ImmutableList<T> lastUpdated = getUpdate();
    
        protected abstract ImmutableList<T> getUpdate();
    
        public void clear() {
          isValid = false;
        }
    
        public ImmutableList<T> get() {
          if(isValid) {
            return lastUpdated;
          } else {
            if(updateGuard.compareAndSet(false, true)) {
              try {
                updateWait.drainPermits();
                lastUpdated = getUpdate();
                isValid = true;
              } finally {
                updateGuard.set(false);
                updateWait.release(Integer.MAX_VALUE);
              }
            } else {
              while(updateGuard.get()) {
                try {
                  updateWait.acquire();
                } catch(InterruptedException e) {
                  break;
                }
              }
            }
            return lastUpdated;
          }
        }
      }
    
      public CacheService() {
        fooCache = new Cache<Foo>() {
          @Override
          protected ImmutableList<Foo> getUpdate() {
            return // database query
          }
        };
        // Likewise when initializing barCache etc
      }
    }
    

    为:

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

答案 1 :(得分:2)

我看到你在每个调用中添加一个id为 iconhelp 的span,如果需要在调用中添加它,然后在关闭弹出窗口时将其删除,为此,使用事件beforeClose并放入$('#iconhelp')。remove()这将删除您在每次调用中创建的整个元素。

                 { 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");
                        $("#iconhelp").remove();
                        return true;
                    }
                }