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"); 
});

对话框只能工作一次

1 个答案: