javascript - 以编程方式单击以下 href 并添加一些代码

Question

我想动态添加一个 href 元素(以打开一个 jnlp 文件)，然后继续调用者的工作流，例如只执行一个 console.log。

到目前为止，我的代码是这样的:

$('<a id="tmplink" />')
  .attr('href', '/open_my.jnlp')
  .text('LINK')
  .appendTo('body')
  .get(0)
  .click(function(e) {
      console.log('aaaa'); // <-- this is never reached
});

jnlp 文件正在打开，但浏览器的控制台(至少在 Firefox 中)已刷新/清理，并且永远不会访问 console.log。

Answer 1

调整这两点后您的代码将正常工作:

1. 无需使用 .get(0)，因为它会返回元素 HTML，如:

   <a id="tmplink" href="/open_my.jnlp">LINK</a>
   

因此您不能将点击事件附加到 (html)，而是可以直接附加事件 click()。

1. 您应该使用 .preventDefault() 来阻止重定向以查看控制台日志:

   $('<a id="tmplink" />')
      .attr('href', '/open_my.jnlp')
      .text('LINK')
      .appendTo('body')
      .click(function(e) {
         e.preventDefault();
         console.log('anchor clicked');
   });
   

希望这对您有所帮助。

$('<a id="tmplink" />')
.attr('href', '/open_my.jnlp')
.text('LINK')
.appendTo('body')
.click(function(e) {
  e.preventDefault();
  console.log('anchor clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>