對話框只能運行一次

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

你有很多的問題，在你的代碼：

1. 的ID必須是唯一的。將#dialog-message更改爲.dialog-message。

2. 需要初始化的對話框，然後再調用它，用autoOpen: false初始化：

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

3. 你需要有一個單獨的調用函數。

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