JQuery Dialog Close issue

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

Ваша кнопка ОК не должен иметь идентификатор, но должен быть определен с помощью класса CSS, так как идентификаторы уникальны по определению, и ваш код в настоящее время распадается с несколькими диалогами IMHO (как $("#example") всегда будет верните первый результат).

Answer 2

Изменить id="okButtonCallBack" на class="okButtonCallBack", так как идентификаторы должны быть уникальными. Затем написать обработчик:

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

Этот обработчик может быть указан только один раз, он не должен быть связан в функции alert_popup_msg.

Answer 3

Используйте on вместо click, и, возможно, я предлагаю, не используйте идентификаторы в настройках идентификаторов, вам не нужно больше одного диалогового окна в то время.

Это будет «прослушивать» изменения узлов в body, которые соответствуют классу dialog-ok-button и связывают обратный вызов с событием click, когда он вставлен в DOM. Поэтому нет необходимости повторно запускать этот код более одного раза.

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