2013-10-11 3 views
0

Jquery 대화 상자를 작성하여 화면에 여러 개의 팝업을 표시하려고하지만 때로는 확인 버튼이 아무런 작업도 수행하지 않습니다.JQuery 대화 상자 닫기 문제

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(); 
    }); 

}; 

누구든지이 문제를 해결할 수 있습니까? 사용자가 어떤 작업을 수행하는 것을 차단합니다. 다시 탐색하여 같은 화면으로 돌아 오더라도 전체 화면을 새로 고침하지 않으면 팝업이 계속 표시됩니다.

감사합니다, 라 메쉬 ID를 정의에 의해 고유하며 코드가 현재 예정대로 $("#example") 항상 것입니다 (여러 대화 상자 이럴 함께 나누기로 귀하의 확인 버튼을, id를하지 말았어야하지만, CSS 클래스를 통해 지정해야합니다

+1

ID가 고유해야하므로 모든 대화 상자에서 동일한 'id = "okButtonCallBack"을 사용할 수 없습니다. – Barmar

+0

JQuery Mobile과 JQuery UI를 함께 사용하고 있습니까? 대화와의 충돌을 포함하여 서로 충돌합니다. JQuery UI 대화 상자 또는 JQuery Mobile 대화 상자를 사용하려고합니까? $ .mobile에 대한 참조는 jquery mobile을 사용하고 있음을 나타내지 만 대화 구문은 JQuery UI 대화 상자에 대한 것입니다. JQuery Mobile을 사용하는 경우 JQuery Mobile 팝업 위젯을 사용하는 것이 좋습니다. 문서 도구 : http://api.jquerymobile.com/popup/ – mayabelle

답변

0

최초의 결과를 돌려 준다).

0

ID가 고유해야하므로 id="okButtonCallBack" ~ class="okButtonCallBack"으로 변경하십시오. 그런 다음 처리기를 작성 :

이 핸들러는 한 번만 지정할 수 있습니다
$(document).on("click", ".okButtonCallBack", function() { 
    var dialog = $(this).closest(".def-popup"); 
    dialog.dialog("close").remove(); 
} 

, 그것은 alert_popup_msg 기능에 결합 할 필요가 없습니다.

0

click 대신 on을 사용하고 ID 속성에 ID를 사용하지 말 것을 제안 할 수 있습니다.이 때 대화 상자는 하나 이상 필요하지 않습니다.

body의 노드 변경 내용을 클래스와 "수신 대기"하고 DOM에 코드를 삽입하면 click 이벤트에 콜백을 바인딩합니다. 따라서이 코드를 두 번 이상 다시 실행할 필요가 없습니다.

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