如何检查一个链接是否被点击然后关闭一个模式

Question

我有一个函数，它打开一个模式，并根据如下条件在对话框中显示错误消息

  Error: function (ex, context) {
       
        var current = $(".Capture[dataid=" + context + "]");
          current.addClass('error');
       if(ex)
       var link='http://localhost/test'
        current.append(`<div class="error">please click on the link <a href = "${link}">Details</a></div>`);

    },

因此，正如您所看到的，我添加了一个要显示在对话框上的链接，但我如何确定用户何时点击了该链接？然后我希望它调用一个按钮点击

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button">Close</button></div></div>

以便最终调用对话框关闭选项

 $(dialog).dialog({
                    modal: true,
                    closeOnEscape: false,
                    dialogClass: "noClose",
                    height: $(window).height() * 0.8,
                    buttons: {
                        "Close": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event) {
                       //does something in here
                       
                    },
                   
                });

所以基本上，当一个链接被点击时，它会将你重定向到那个页面，并为你关闭对话框。

Answer 1

如果我正确地得到了你想要的-试试这个：

$('a').on('click', (e) => 
   { 
      e.preventDefault();
      $('button')[0].click();
   });

Answer 2

您可以在a标记上写入click事件，因此每当单击此标记时，获取a标记的href，然后使用.trigger('click')触发关闭按钮上的click事件，并最终重定向到所需的页面。

演示代码：

null

$("#dialog").dialog({
  modal: true,
  closeOnEscape: false,
  dialogClass: "noClose",
  height: $(window).height() * 0.8,
  buttons: {
    "Close": function() {
      $(this).dialog("close");
      console.log(" I am in")
    }
  },
  close: function(event) {
    //does something in here

  },

});

//on click of a tag
$(document).on("click", ".error a", function(e) {
  e.preventDefault();
  var href = $(this).attr("href") //get href
  $(".ui-dialog-buttonset button").trigger('click'); //trigger click event on close button
  window.location.href = href;
})

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Here is dialog.
<div id="dialog" title="Basic dialog">
  <div class="error">please click on the link
    <a href="google.com">Details</a>
  </div>
</div>