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>

在onclick链接中触发href时调用的jQuery函数

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

你可以使用这样的东西;

首次参赛：

  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（）;

Answer 2

我会这样做。我会从这样的标记开始：

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

我认为最简单的方法是让一个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>

这样，您无需在每次打开对话框时创建。

从href onclick加载jQuery函数

3 个答案: