Bootstrap 3-远程加载模式创建重复的javascript事件

我有一个带有2个按钮的简单页面，每个按钮使用以下方法代码远程填充模式的内容

  $("button").click( function(e) {
      e.preventDefault();
      var remoteLoc = $(this).attr('data-loc');
      $("#myModal .modal-content").load(remoteLoc, function() { 
        $("#myModal").modal("show"); 
      });
  });
  $('#myModal').on('hidden.bs.modal', function (e) {
    $("#myModal .modal-content").empty();
  });

加载内容的一个简单示例如下：

<div class="modal-body">
  <a id="tomtest" href="#">Test link</a>
  <p>dfghdfgh dfgh dfgh dfgh dfgh dfgh dfgh dfg h</p>
</div>
<script type="text/javascript">
  $(document).on("click", "a#tomtest", function(e) {
    e.preventDefault();
    alert(123);
  });
</script>

dfghdfgh dfgh dfgh dfgh dfgh dfgh dfgh dfg h

$（文档）。在（“单击”，“a#tomtest”，函数（e）上{
e、 预防默认值（）；
警报（123）；
});

问题是，自从加载页面以来，警报触发的次数与我打开模式的次数相同

我能做些什么来阻止这种情况发生

编辑

根据@Paulito的回答，我修改了代码，在模式内容中添加了一个动态创建的链接

<div class="modal-body">
  <a id="tomAdder" href="#">Add alert link</a>
  <p>dfghdfgh dfgh dfgh dfgh dfgh dfgh dfgh dfg h</p>
</div>
<script type="text/javascript">
  $("a#tomAdder").on("click", function(e) {
    e.preventDefault();
    $('<a class="tomtest" href="#">Test link</a>').prependTo(".modal-body");
  });
  $(document).on("click","a.tomtest", function(e) {
    e.preventDefault();
    alert(123);
  });
</script>

dfghdfgh dfgh dfgh dfgh dfgh dfgh dfgh dfg h

$（“a#tomAdder”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（''）.prependTo（“.modal body”）；
});
$（文档）。在（“单击”，“a.tomtest”，函数（e）{
e、 预防默认值（）；
警报（123）；
});

---

在这种情况下，有什么想法吗？

更新了保利托的观点：

尝试将其放入javascript中：

$(this).off("click");

---

警报后。在第一次开火后，应将其移除。

更新为包括Paulito的油井放置点：

尝试将其放入javascript中：

$(this).off("click");

---

警报后。然后，它应该在第一次开火后将其移除。

使用委托事件，例如

$（文档）将处理程序绑定到尚不存在的元素，这样每次打开新模式时，都会将新处理程序附加到同一链接

以通常方式附加事件，以便仅对现有链接执行此操作：

$("a#tomtest").on("click", function(e) {
e.preventDefault();
alert(123);

}))

更新：

如果您仍然需要使用委托事件代理，那么在绑定新的单击处理程序之前，您应该能够像这样解除所有委托的单击处理程序的绑定：

$(document).off("click", "a#tomtest" );

通过使用委托事件，例如
$（document）.on（“click”，“a#tomtest”，function（e）{…}）将处理程序绑定到尚不存在的元素，这样每次打开新模式时，都会将新处理程序附加到同一链接

以通常方式附加事件，以便仅对现有链接执行此操作：

$("a#tomtest").on("click", function(e) {
e.preventDefault();
alert(123);

}))

更新：

如果您仍然需要使用委托事件代理，那么在绑定新的单击处理程序之前，您应该能够像这样解除所有委托的单击处理程序的绑定：

$(document).off("click", "a#tomtest" );

我明白你的观点，这确实解决了这个问题，但如果在加载后将link#tomtest动态添加到modal中会怎么样呢。那个么这个解决方案就不会再起作用了，对吗？你们是对的，若链接是动态插入的，那个么这个解决方案就不会起作用了afterwards@Tom：
$（“a#tomtest”）.off（“单击“，”**”）应该解除所有委托事件处理程序的绑定，在`$（文档）之前给它一个tryright`不…仍然会在打开模式时多次触发警报。我明白你的观点，这确实解决了问题。但如果在加载后将链接#tomtest动态添加到模式中会怎么样。那么此解决方案将不再有效，对吗？你是对的，如果动态插入链接，这将不起作用afterwards@Tom:
$（“a#tomtest”）.off（“click”，“**”）；
应该解除所有委托事件处理程序的绑定，在“$（文档）”之前给它一个tryright。在（“click”，“a.tomtest”，function（）{…}`Nope…上，打开模式的次数仍然会触发警报。最好使用
.off（）
而不是
.unbind（））
在较新的jquery版本中，最好在较新的jquery版本中使用
.off（）
而不是
.unbind（）