Javascript jQuery AJAX函数，当执行多次时，会导致页面多次加载

我正在使用jQuery函数将内容动态加载到页面中——这是一个AJAX调用

根据单击的内容，需要加载四个页面——基本上是由AJAX调用驱动的导航栏。问题是，在第一次调用之后，页面开始为一次调用加载多次，页面上的每次调用都会加载更多次。为什么会这样

此代码正在Statamic中运行

以下是JS代码：

//jQuery AJAX for subpages
var verticals = document.getElementsByClassName('verticals');
verticals = verticals[0].childNodes[3].childNodes[1].childNodes[1];
var url = verticals.getElementsByTagName('a');

document.body.addEventListener('mouseup', function(event) {
    var validate = event.target.id;
    var target = event.target.getAttribute('name');
    if(validate == 'subnav') {
        $('#populate').load(target);
    }
}, true);

HTML：

<div class="verticals">
  <div class="arrow-wrap show-for-medium-up">
    <div class="arrow"></div>
  </div>
  <div class="row">
    <div class="show-for-medium-up v-nav">
      <div class="small-12 columns">
        <ul class="small-block-grid-5">
          {{ nav from="/{segment_1}/{segment_2}" }}
            <li><a id="subnav" name="{{ url }}">{{ title }}</a></li>
          {{ /nav }}
        </ul>
      </div>
    </div> 
    <div class="small-12 columns show-for-small">
      <a href="#" class="button" data-dropdown="drop">Industries Served</a>
       <ul id="drop" class="f-dropdown" data-dropdown-content>
        {{ nav from="/{segment_1}/{segment_2}" }}

          <li><a id="subnav" name="{{ url }}">{{ title }}</a></li>

        {{ /nav }}
      </ul>
    </div>
  </div>
</div>
<div id="populate"></div>

我解决了这个问题

由于使用了带有重复不必要代码的替代模板文件，Statamic多次导入Javascript库。删除该代码解决了问题

所以KevinB非常赞同他的建议

---

谢谢大家

你能分享相应的HTML吗？你有没有试过和其他的监听器分享？看起来你的“垂直方向”是HREF，所以在鼠标悬停时，浏览器会跟随链接。尝试添加event.preventDefault；添加到addEventListener函数。当然，我将包含相应的HTML。沿着dom向下延伸到标记的垂直点实际上是一个名称属性，而不是href。你的建议仍然适用吗，beercodebeer？你提供的代码是用什么包装的？该代码会被多次执行，导致多个事件被绑定吗？