问为什么单击按钮时对话框不打开？

EN

$(function(){
        $("#recipientDialogue").dialog({
          autoOpen:false,
        });
        $("#exclusionDialogue").dialog({
          autoOpen:false,
        });
        $("#suppressionDialogue").dialog({
          autoOpen:false,
        });

        $("openRecipient").click(function(){
           $("#recipientDialogue").dialog("open");
        });
    });

    <td colspan="3"><button id="openRecipient">Choose Recipients</div></td>
          <td colspan="3"><button id="openSuppression">Choose Recipients</button></td>
          <td colspan="3"><button id="openExclusion">Choose Recipients</button></td>

<div id="recipientDialogue">
    <td colspan="3" style="padding-left: 55px;">
      <div id="recipientCheck"></div>
    </td>
</div>
<div id="suppressionDialogue">
    <td colspan="3" style="padding-left: 55px;"> 
      <div id="suppressionCheck"></div> 
    </td>
</div>
<div id="exclusionDialogue">
    <td colspan="3" style="padding-left: 55px;">
      <div id="exclusionCheck"></div>
    </td>
</div>

for(var i=0; i< encoded_recipient_array.length;i++){

        jQuery('<input/>', {type:'checkbox',
            value: encoded_recipient_array[i].id,
            name:'recipient_array[]'
            }).appendTo('#recipientCheck'); //append checkbox only with id as its value....
        jQuery('<p>',{'text':encoded_recipient_array[i].name
            }).appendTo('#recipientCheck'); //append label of checkbox ......
        jQuery('<br/>').appendTo('#recipientCheck'); //looks better you know...
    }