jQuery mobile : 링크에 확인 대화 상자를 추가 하시겠습니까?

'Are you sure?'를 추가하고 싶습니다. 대화 상자에서 jQuery 모바일 페이지의 링크를 확인하십시오.jQuery mobile : 링크에 확인 대화 상자를 추가 하시겠습니까?

내 코드는 다음과 같습니다. jQuery 워드 프로세서에서 바로 벗어났습니다. 모두 confirm 대화 상자가있는 링크와 별개입니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 

    <!-- Start of first page --> 
    <div data-role="page" id="foo"> 
     <div data-role="header"> 
      <h1>Foo</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <p>I'm first in the source order so I'm shown as the page.</p>  
      <p>View internal page called <a href="#bar">bar</a></p> 
     </div><!-- /content --> 
     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /header --> 
    </div><!-- /page --> 

<!-- Start of second page --> 
<div data-role="page" id="bar"> 
    <div data-role="header"> 
      <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="return confirm('Leave page?'); history.back();">Back</a><h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p><a href="#foo">Back to foo</a></p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /header --> 
</div><!-- /page --> 

</body> 
</html>

는 현재 확인 대화 상자가 영향 :(

누구든지 내가 jQuery를 모바일로 다음을 추가 할 수있는 방법을 알고이 없다?

감사합니다!

출처

2011-04-26 simon

당신은 ID 또는 클래스를주는 경우가 더 좋아 귀하의 단추 및 jQuery 준비 함수에서 이벤트를 바인드하거나 양식을 동적으로 작성하는 경우 (수행하는 경우)

다음 아이디 뒷면과 홈 버튼에 속성과 인라인 온 클릭 속성을 제거는 스크립트 태그에 이것을 추가 : 사용자가 작업을 취소하는 경우 뒤로 단추를 클릭

는

$(function(){ 
    $('#btnBack').click(function(){ 
     if(!confirm("Leave page?")) return false; 
     history.back(); 
    }); 

    $('#btnFoo').click(function(event){ 
     return confirm("Leave page?"); 
    }); 
});

, 그것은 단지 false를 반환합니다. 그들이 ok를 클릭하면 history.back()을 실행하여 이전 페이지로 돌아가고 싶습니다.

foo 링크에서 하이퍼 링크를 자동으로 따르지 않으려면 false를 반환해야합니다.

DOM을 통해 javascript에서 수행하는 대부분의 사용자 상호 작용과 달리 확인 기능은 동기식입니다. 즉, 대화 상자가 팝업되면 사용자가 버튼을 누를 때까지 코드 실행이 보류 중이고 해당 함수는 해당 클릭의 결과로 평가됩니다. 이것은 사실 당신이이 상황에서 필요로하는 것입니다.

편집 : @ bazmegakapa 님의 제안에 따라 preventDefault()을 삭제했습니다.

출처

2011-04-26 21:30:21 DarthJDG

+1 그러나'에서는 event.preventDefault()'와'FALSE '반환을 모두 호출에있는 점은 무엇입니까? 'return false;는 (http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)'preventDefault' +'stopPropagation'과 같아야합니다. – kapa

좋은 지적, 방금 jsfiddle에서 일한 것을 게시했습니다. 반면에 그 버튼에 원래 코드에는 아무런 문제가 없다는 것을 보여 주며, 인라인 자바 스크립트 (Chrome과 FF에서는 적어도)로 작동하지 않았습니다. – DarthJDG

멋진, 고마워! – simon

나는 똑같은 문제에 직면하고 있었지만 지금은 풀었다. 필자와 필자의 모범 사례가 여러분과 다른 필자에게 도움이되기를 바랍니다.

<a href="javascript:delComment();" data-role="button" data-icon="false" data-mini="true" data-inline="true" data-theme="b">Delete</a> 



function delComment(commentSno) { 

... 
// save 
var nextUrl = "/deleteComment.do"; 
$("#frm").attr("action", nextUrl); 

showConfirm("Are you sure to delete?", function() { 
    $("#frm").submit(); 
    } 
); 

} 





<div data-role="dialog" id="confirmbox"> 
    <div data-role="header" data-icon="false"> 
     <h1>Confirmation</h1> 
    </div><!-- /header --> 

     <div data-role="content"> 
     <h3 id="confirmMsg">Confirmation Message</h3> 

     <br><p> 
     <center> 
     <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp; </a> 
     &nbsp;&nbsp;&nbsp; 
     <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">No</a> 
     </center> 
     </div>

function showConfirm(msg, callback) { 
     $("#confirmMsg").text(msg); 
     $("#confirmbox .btnConfirmYes").on("click.confirmbox", function() { 
      $("#confirmbox").dialog("close"); 
      callback(); 
     }); 

     $("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) { 
      }); 

     $.mobile.changePage("#confirmbox"); 

}

출처

2012-11-12 02:56:07 Lina

jQuery mobile : 링크에 확인 대화 상자를 추가 하시겠습니까?

답변

관련 문제