JQuery диалог с динамическим контентом

Question

Я хочу создать диалоговое окно jQuery на лету.Я использую это:

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there');
$(newDiv).dialog();

Затем у меня есть это в заголовке html:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

Когда я пытаюсь запустить JS в IE7, я получаю следующую ошибку на $ (newDiv) .dialog ();строка: объект не поддерживает это свойство или метод.

Кто-нибудь знает, что происходит?

Answer 1

Ваш код работает, вы можете проверить его здесь , это означает, что у вас, вероятно, есть проблема с включением скрипта, убедитесь, что ваши файлы находятся в папке js рядом со страницей или если вы хотите, чтобы они были из корня сайта, используйте /js.

Или рассмотрите возможность использования CDN .

Вы можете сделать свой код немного более эффективным (я понимаю, что это всего лишь тест), например:

var newDiv = $(document.createElement('div')); 
newDiv.html('hello there');
newDiv.dialog();

Это работает, потому что newDiv уже является элементом jQuery, нет причин каждый раз клонировать объект ... или немного короче:

$('<div />').html('hello there').dialog();

Answer 2

Вот альтернативный способ динамического создания диалогов и их сообщений:

     $('<div></div>').dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = 'Hello World';
          $(this).html(markup);
        },
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });  //end confirm dialog

Просмотр в действии: http://jsfiddle.net/DYbwb/

Answer 3

Код хороший, вам нужен справочник по jquery и jquery ui

<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>