Question

我正在尝试构建Jquery Dialog以在屏幕上显示多个弹出窗口，但有时OK按钮不执行任何操作。

function alert_popup_msg(_msg)
{
   var id = "" + (new Date()).getTime();
   var popDiv = "<div id='" + id + "' class=\"dialog-size def-popup\"><div  class=\"popup-background\"><label class=\"color-white no-text-shadow center-align font-helv-16-bold std-padding-a\">Alert</label><label class=\"color-white no-text-shadow center-align font-helv-12-reg std-padding-a\">"+_msg+"</label><div class=\"center-align\"><a class=\"btn-simple-black-orange btn-text btn-login\" id=\"okButtonCallBack\">Ok</a></div></div></div> ";                                             
   $.mobile.activePage.append(popDiv).trigger("pagecreate");

   $( "#" + id ).dialog({
      modal: false,

    });
   $("#okButtonCallBack").click(function(event){
            $("#" + id).dialog("close");
            $("#" + id).remove();
   });

};

有人可以帮我解决这个问题吗？它阻止用户执行任何操作。即使您向后导航并返回到同一屏幕，弹出窗口仍会显示，除非您刷新整个屏幕。

谢谢，拉梅什

Answer 1

你的ok按钮不应该有id，但是应该通过CSS类指定，因为ID根据定义是唯一的，你的代码当前打破多个对话框imho（因为$("#example")将始终返回第一个结果）

Answer 2

将id="okButtonCallBack"更改为class="okButtonCallBack"，因为ID必须是唯一的。然后编写处理程序：

$(document).on("click", ".okButtonCallBack", function() {
    var dialog = $(this).closest(".def-popup");
    dialog.dialog("close").remove();
}

此处理程序只能指定一次，不需要绑定在alert_popup_msg函数中。

Answer 3

使用on代替click，我可以建议，不要在ID属性中使用ID，此时您不需要超过1个对话框。

这将“监听”body中与类dialog-ok-button匹配的节点更改，并在将其插入DOM时将回调绑定到click事件。因此，无需多次重新运行此代码。

$('body').on('click', '.dialog-ok-button', function(event){
    $(".dialog").dialog("close");
    $(".dialog").remove();
});

JQuery Dialog Close问题

3 个答案: