Hi devs

I have searched many forums and I can't seem to find the answer to a challenge I am faced with.

Please see my code below.

I have a list of anchors with either a class "confirm" or "button-disabled". When I click on the anchor via jQuery, the function executes a expected and the dialog opens up but the function does not wait for a response from the dialog. It just continues straight through the rest of the function and navigates to the href location of the anchor without confirmation. I basically first want confirmation before allowing the browser to redirect to the anchors href.

I have tried an alternative way to do it but it's not the ideal way to do it and it's not practical. Can anyone give me some advice?

Code:
<script type="text/javascript">
	$(document).ready(function() {
		$('.confirm').click(function(evt) {					
			var answered = false;
			var answer = false;
			
			$("<div>Are you sure?</div>").dialog({
				title: 'Please confirm...',
				modal: true,
				buttons: {
					"Continue": function() {
						$( this ).dialog( "close" );
						answer = true;
						answered = true;
					},
					Cancel: function() {
						$( this ).dialog( "close" );
						answer = false;
						answered = true;
					}
				}
			});
			
			while(!answered) {
				//sleep
				setInterval(function(){
					//do nothing 
				}, 1000);
			}
			
			return answer;
		});
		
		$('.button-disabled').click(function() {
			return false;
		});
	});
</script>