对话框只工作一次

Question

当我使用下面的代码时，对话框运行只有一次。为什么？

HTML:

<table>
    <tr id="header">
        <td>Name</td>
        <td>Surname</td>
        <td>Message</td>
    </tr>
    <tr>
        <td>Name 1</td>
        <td>Surname 1</td>
        <td id="tikla1">Click Here!
            <div id="dialog-message" title="12.07.2015" style="display: none">Msg 1: lorem ipsum</div>
        </td>
    </tr>
    <tr>
        <td>Name 2</td>
        <td>Surname 2</td>
        <td id="tikla2">Click Here!
            <div id="dialog-message" title="12.07.2015" style="display: none">Msg 2: dolor sit amet
                <br>
            </div>
        </td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

jQuery:

$("#tikla1,#tikla2").click(function () {
    $(this).children("#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});

CSS:

table, td {
    border:1px solid;
}
#header {
    font-weight: bold;
}
#tikla:hover {
    cursor:pointer;
    color:red;
}

Fiddle Demo

Answer 1

你的代码有很多问题：

ID 必须是唯一的。将 #dialog-message 更改为 .dialog-message.

需要先初始化对话框再调用，用autoOpen: false初始化：

$("#tikla1, #tikla2").children(".dialog-message").dialog({
    modal: true,
    autoOpen: false,
    buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
        }
    }
});

需要单独调用函数

$( "#tikla1, #tikla2" ).click(function() {
    $(this).children(".dialog-message").dialog("open"); 
});

对话框只工作一次

Dialog box works only once

jquery

dialog

click