2012-06-25 4 views
0

В HTML ниже будет отображаться страница с 2 кнопками. Один из них откроет диалог JQuery обычным способом - и работает нормально.Вызов диалога JQuery из onclick

Другая кнопка - попытка открыть диалоговую форму без функции jquery - но она не работает. Я уверен, что вторая кнопка не так, как это должно быть сделано, но по причинам, которые я пропущу здесь, я хотел бы знать, возможно ли это вообще?

Я новичок в jquery - поэтому я уверен, что есть основные вещи, которые занимают пространство имен и т. Д., Которые я не совсем понимаю в данный момент. Пробовав множество способов заставить его работать без успеха - теперь я прошу совета относительно того, как это можно сделать. Более общие вопросы касаются того, как «нормальный» javascript может ссылаться и манипулировать функциями JQuery.

Можно ли это сделать?

<!doctype html> 
<html> 
<head> 
    <title>My Dialog demo</title> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var $dialog = $('<div></div>') 
      .html('My Dialog Demo...') 
      .dialog({ 
       autoOpen: false, 
       title: 'My Dialog' 
      }); 

      $('#Button1').click(function() { 
       $dialog.dialog('open'); 
       return false; ////cancel eventbubbeling 
      }); 
     }); 

     function showDialog() { 
      $dialog.dialog('open'); 
      return false //cancel eventbubbeling 
     } 

    </script> 

</head> 
<body> 
<!-- JQuery autowired event--> 
<button id="Button1">Open dialog (JQuery event wireup)</button> 
<!-- Manual --> 
<button id="Button2" onclick="showDialog();">Open (manual onClick event)</button> 
</body> 
</html> 
+0

следует рассмотреть вопрос о повышении Jquery к более актуальной версии, ваш довольно старый. Можно просто изменить src тега скрипта с «1.3.2» до «1.7» и jQuery UI на «1.8». Некоторый код, с которым вы сталкиваетесь, может включать более новые методы. – charlietfl

+0

Спасибо за подсказку - сделаем! –

ответ

4

$dialog Сделать Globle как этот

<script type="text/javascript"> 
     var $dialog; 
     $(document).ready(function() { 
      $dialog = $('<div></div>') 
      .html('My Dialog Demo...') 
      .dialog({ 
       autoOpen: false, 
       title: 'My Dialog' 
      }); 

      $('#Button1').click(function() { 
       $dialog.dialog('open'); 
       return false; ////cancel eventbubbeling 
      }); 
     }); 

     function showDialog() { 
      $dialog.dialog('open'); 
      return false //cancel eventbubbeling 
     } 

    </script> 
Смежные вопросы