Загрузить функцию jQuery из href onclick

Question

У меня есть HTML-таблица со столбцом в строке с этим HTML-кодом внутри тегов <td></td>:

 <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>

И функция jQuery, которая вызывается, когда onclick запускается внутри href ссылки

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

Как я могу написать функцию jQuery, чтобы она срабатывала только один раз при нажатии на ссылку? Мне нужно иметь функцию jQuery modalDialog как отдельную функцию, потому что в таблице html используется частичный рендеринг AJAX.

Проблема в том, что когда я нажимаю ссылку href, когда ничего не происходит, второй щелчок по ссылкам дает мне два модальных диалоговых окна, а третий щелчок дает мне три модальных диалоговых окна и так далее ...

Answer 1

Я бы сделал это по-другому. Я бы начал с разметки так:

<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>

с CSS:

div.message > div { display: none; }

и JS:

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

Answer 2

Я думаю, что самый простой способ - это иметь один div, который показывает любой другой текст.

<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>

Таким образом, вам не нужно создавать каждый раз, когда вы открываете диалоговое окно.

Answer 3

Вы можете использовать что-то вроде этого;

При первой записи:

  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();
      });
    }
  }

Вы также можете использовать "return false;" вместо запуска event.preventDefault ();