2012-03-05 2 views
0

Jquery 대화 상자를 가지고 놀고 싶습니다. 버튼을 클릭하면 대화 상자가 나타납니다. 이 코드는 Jquery 문서 (블로그 게시물 링크)를 통해 바로 복사 할 수 있습니다.jquery 대화 상자로드 문제

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script> 
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script> 
<script type="text/javascript"> 

var js = jQuery.noConflict(); 

js(document).ready(function() { 
var $dialog = js('<div></div>') 
    .html('This dialog will show every time!') 
    .dialog({ 
     autoOpen: false, 
     title: 'Basic Dialog' 
    }); 

js('#axis-details').click(function() { 
    $dialog.dialog('open'); 
    // prevent the default action, e.g., following a link 
    return false; 
}); 
}); 
</script> 

간단한 HTML 버튼 :

<button id="axis-details" >API Key</button> 

는이 오류를 얻을 : js("<div></div>").html("This dialog will show every time!").dialog is not a function

먼저 내가 여기에 코드를 잘못 아무 짓도 안 했어요 있는지 확인하려면. 일반적으로 이것은 jquery-ui를 적절하게로드하지 못하고 있음을 의미하지만 방화 광구가 잘로드 된 것을 볼 수 있습니다. 또한 다른 패키지와 충돌하지 않기 때문에 noConflict()를 확인합니다.

내가 잘못 가고있는 어떤 힌트를 주시면 감사하겠습니다.

+1

특히 jQuery UI에서 .noConflict()를 사용하면 몇 가지 버그가있는 것으로 보입니다. noConflict에 대한 API 페이지의 하단에있는 주석을 확인하십시오. http://api.jquery.com/jQuery.noConflict/ –

+2

다른 페이지에서 jQuery를 다시로드 할 수있는 것처럼 들리므로 jQueryUI를 제거 할 것입니다. jQuery 객체 – charlietfl

+2

예, 코드가 잘 작동하면 격리됩니다. http://jsfiddle.net/JvuY7/ –

답변

1

@Travis J는이 권리가 있습니다. .noConflict() 및 jQuery UI와 일종의 충돌이있는 것처럼 보입니다. 얼마나 아이러니하지?)

noConflict()를 제거하면이 작업을 수행 할 수 있습니다.

관련 문제