如何检查 link 是否已被单击然后关闭模式

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>`);

    },

所以你可以看到我添加了一个 link 以显示在对话框中，但是我如何确定用户何时单击 link？然后我希望它调用按钮单击这是

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

所以基本上当单击 link 时，它会将您重定向到该页面并为您关闭对话框。

Answer 1

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

演示代码 :

$("#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>

Answer 2

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

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

如何检查 link 是否已被单击然后关闭模式

How to check if a link has been clicked then close a modal

javascript

jquery

modal-dialog