jQuery UI 대화 상자가 기본값을 방지하고 버튼 클릭시 기본값을 다시 시작합니다.

Question

jQuery UI를 사용하여 "이 작업을 정말로 수행 하시겠습니까?"라고 묻는 대화 상자를 표시합니다. 사용자가 하이퍼 링크 또는 양식 단추를 클릭 할 때

사용자가 "확인"을 클릭하면 원래 기본 동작을 수행하려고합니다.

여기 내 코드입니다 :

[HTML]

<a href="page.htm">Click me</a> 

[JQuery와]

// Global variable keeps track of whether the user has clicked confirm 

var confirmed = false; 

$("a").on("click", function(e) { 

    var self = $(this); 

    var options = { 
     autoOpen: true, 
     modal: true, 
     title: "Confirmation Required", 
     buttons : { 
      "Confirm" : function() { 
       // The user has confirmed, so set global variable to true 
       confirmed = true; 

       // Re-trigger the click 
       self.trigger("click"); 
      }, 
      "Cancel" : function() { 
       $(this).dialog("close"); 
      } 
     } 
    }; 

    // If the user hasn't yet confirmed, display the dialogue box 
    if (confirmed == false) { 
     $("<div />").text("Are you sure you want to do this?").dialog(options); 

     // Prevent the default action 
     e.preventDefault(); 
    } 
    // Otherwise the user has confirmed, so don't preventDefault and return true 
    else { 
     confirmed = false; 

     // Alert here to check we reached this point 
     alert("Returning true"); 
     return true; 
    } 
}); 

먼저 링크를 클릭, 기본 동작을 방지하고 대화 상자가 열립니다.

대화 상자에서 "확인"을 클릭하면 클릭 이벤트가 다시 트리거되고 "돌아 오는 중"이라는 경고 상자가 나타납니다. 지금까지 모든 좋은, 그러나 페이지가로드되지 않습니다. 따라서 어떤 이유로 든 기본 이벤트 주변의 두 번째 시간은 여전히 ​​방지되고 있으며 내 인생에서 그 이유를 알 수 없습니다.

Answer 1

이것은 대화 상자가 아직 열려 있기 때문일 가능성이 큽니다. 그러나이를 닫은 경우에도 이와 같은 a 요소를 클릭 할 수 없습니다.

trigger('click')

은 jQuery를의 클릭 이벤트에 결합 인 기능을 트리거하고 $el.click()을 사용하는 경우, 나는 그것이 전용 형식으로 내가 이것을 해결하는 방법 <a onclick="func()">Click here</a>

을 지원하는 생각; 대화 상자 확인에서 나는 <a> 요소 href를 기반으로 jQuery로 창 위치를 업데이트합니다.

아래 작업 스 니펫을 참조하십시오.

<a href="page.htm">Click me</a> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

    var confirmed = false; 

    $("a").on("click", function(event) { 

     var $self = $(this); 

     if (!confirmed) { 

     event.preventDefault(); 

     $("<div />").text("Are you sure you want to do this?").dialog({ 
      autoOpen: true, 
      modal: true, 
      title: "Confirmation Required", 
      buttons : { 
       "Confirm" : function() { 
        window.location.href = $self.attr('href'); 
       }, 
       "Cancel" : function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     } 

    }); 

}); 


</script>