Javascript-форум - jquery dialog запускается только при втором обращении

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - jquery dialog запускается только при втором обращении (https://javascript.ru/forum/jquery/45218-jquery-dialog-zapuskaetsya-tolko-pri-vtorom-obrashhenii.html)

jquery dialog запускается только при втором обращении

Добрый день.

Подскажите пожалуйста, в чем может быть ошибка.
Я беру код для dialog`а

<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>

<div id="dialog" title="Basic dialog">
<p>тут тело диалога</p>
</div>
<button id="opener">Open Dialog</button>

Когда я переделываю этот код, чтобы он работал с разными кнопками, при нажатии на которые выводились бы разные сообщения, то у меня получается следующий код:

<script>
        function clickButton(idButton, idDiv) {
            $(idButton).click(function () {
                $(idDiv).dialog("open");
            });
        }
    </script>
    
    <script>
        $(function () {
            $(".image").dialog({
                autoOpen: false,
                width: "auto",
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "blind",
                    duration: 1000
                }
            });
        });
    </script>

Вопрос в следующем: после загрузки страницы диалог открывается только при втором нажатии на кнопку. Если его потом закрыть и нажать на кнопку вновь, в этот раз диалог открывается с первого нажатия. Из-за чего это происходит?

Фоныч,
где запуск clickButton ?

Цитата:

Сообщение от рони

где запуск clickButton ?

<div id="table" class="image" title="Basic table">
раз текст
</div>
<button id="openTable" class="open" onclick="clickButton(openTable, table)">Open Table</button>


<div id="win" class="image" title="Basic window">
два текст
</div>
<button id="openWindow" class="open" onclick="clickButton(openWindow, win)">Open Window</button>

Фоныч,
по клику клику -- 1 клик -- навесили открытие - 2 клик навесли открытие + открыли диалог -- 3 клик навесили открытие -- открыли диалог + закрыли диалог ... и тд пока браузер неопухнет.

Подскажите, как правильно переписать, чтобы никто не опухал :)

Фоныч,

<!DOCTYPE HTML>

<html>

<head>
    <title>dialog demo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type="text/css">

  <style type="text/css">
  .image2{
     display: none;
  }

  </style>

  <script>

      $(function () {
            $('.open').click(function () {
                 var id = $(this).data('image')
                $(id).dialog("open");
            });

            $(".image").dialog({
                autoOpen: false,
                width: "auto",
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "blind",
                    duration: 1000
                }
            });
        });

  </script>
</head>

<body>
<div id="dialog" title="Basic dialog"  class="image">
<p>тут тело диалога</p>
</div>
<button id="opener" class="open" data-image='#dialog'>Open Dialog</button>
<div id="table" class="image" title="Basic table">
раз текст
</div>
<button id="openTable" class="open" data-image='#table'>Open Table</button>
<div id="win" class="image" title="Basic window">
два текст
</div>
<button id="openWindow" class="open" data-image='#win'>Open Window</button>

</body>

</html>

Спасибо, большое. Заработало так как надо.