javascript - 将事件处理程序动态添加到也是动态生成的 href

Question

我有一个按钮，当单击此按钮时，我需要动态生成一个链接并向其添加一个处理程序，该处理程序显示 Twitter Bootstrap 模式。我试过这个:

$(function() {

  function showModal() {
    $("#myModal").modal("show");
  }

  $(document).on("click", "#my_btn", function() {
    //generating a link a adding a handler to it which is "showModal()"
    //.....
    $("#my_href").html("Some text123 <a href='#' onclick='showModal();'>test123</a>.");
    //.....
  })
});

但是当我点击此链接时，会抛出错误，并显示

Uncaught ReferenceError: showModal is not defined 

当然，我可以将 showModal() 移出 $(function() {...})。但我想知道，有没有更好的方法呢？总的来说，这是实现我想要的目标的好方法吗？

更新: 即使将 showModal() 移出 $(function() {...}) 后，它也不起作用，它会将我重定向到同一页面，但不会显示弹出窗口。

Answer 1

不要使用内联 Javascript。您已经发布了一个完美的示例，说明您应该如何在问题中正确执行此操作:在包含元素上使用 .on。

 $(document).on("click", "#my_btn", function() {
    $("#my_href").html("Some text123 <a href='#'>test123</a>.");
 });

 $('#my_href').on('click', 'a', showModal);