Question

我使用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>

Answer 1

我解决了这个问题。

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

所以KevinB与他的建议非常接近。

谢谢你们！

jQuery AJAX函数导致页面在多次执行时加载多次

1 个答案: