Load jQuery function from a href onclick

I have a HTML table with a column per row with this html code inside the <td></td> 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 a href link

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

How can I write the jQuery function 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 me two modal dialog and third click gives me three modal dialog and so on...

I think the simplest way is to have a single div that shows every other text.

<div id="MessageDataDiv"></div>

<script>
$(function() {
  $('#MessageDataDiv').dialog({ autoOpen: false });
});
function modalDialog(a) {
  if($(a).data('clicked')) return false;
  $(a).data('clicked', true);
  $('#MessageDataDiv').html($(a).next().text()).dialog();
  return false;
}
</script>

This way you don't have to create a every time you open a dialog.

You can use something like this;

On first entry:

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

You might also get away with using "return false;" instead of firing event.preventDefault();

I would do this differently. I would start with markup like this:

<div class="message">
  <a href="#">17795</a>
  <div>some text to show up in my jquery modal window when function modaldialog is clicked.</div>
</div>

with CSS:

div.message > div { display: none; }

and JS:

$("div.message > a").one("click", function() {
  $(this).next().dialog();
  return false;
});