I have a html table with a column per row with this html code inside the tags:

 <a onclick="modalDialog(this); return false;" href="javascript:void(0)">17795</a>
    <div style="display: none;" class="MessageDataDiv">
     some text to show up in my jquery modal window when function modaldialog is clicked.
    </div>

And the jquery function that is called when onclick is fired within the a href link

function modalDialog(event) {
        $('a.message').click(function () {
         var div = new $(this).closest("td").find(".MessageDataDiv").clone();
         div.show().dialog();
          event.preventDefault();
        });
    }

Can anyone help me with some advice how to write the jquery function more correct so the function only fires one time when the linked is clicked. I need to have the jquery function modalDialog as a separate function because the html table use ajax partial rendering...

The problem is when i click the a href link first time nothing happens, second click on the links gives med two modal dialog and third click gives me three modal dialog and so on...