javascript - jquery uiで現在の要素にダイアログを配置する方法は?

Question

Javascript コード:

currentElement=0;
$(function() {
    $( "#dialog" ).dialog({
        position: {
                my: "top",
                at: "bottom",
                of: $( 'input[name='+currentElement+']' )
            },
        autoOpen: false,      
              show: { effect: "blind", duration: 1000 },
              hide: { effect: "explode", duration: 400 }  
        });     
        $( 'input[name^=opener]' ).click(function() {
            currentElement=this.id;
            $( "#dialog" ).dialog( "open" );    
        });  
});  

HTML コード:

<table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    <td><input type="button" name="opener1" id=1></td>
  </tr>
<tr>
  <td>row 2, cell 1</td>
  <td>row 2, cell 2</td>
  <td><input type="button" name="opener2" id=2></td>
</tr>
</table>

<div id="dialog" title="Basic dialog">  <p>This is an animated dialog which
 is useful for    displaying information. The dialog window can be moved, resized
 and closed with the 'x' icon.</p></div>

しかし、うまくいきません。詳細 - ダイアログを閉じることができません。直し方？