JavaScript 每个标签只加载一次？ （多个“页面”，单页中的表格）

Question

好的，所以我正在创建一个脚本以避免激活父 div 中的链接。我添加了网站的图片，让您了解它的外观并让我更容易解释。白色选项卡由 Ajax 控制，并且在加载 Orders/Subscriptions 页面时加载所有这些选项卡。

表格中的所有行都是可点击的，当您将鼠标悬停在蓝色齿轮上时，它会显示一个下拉菜单。此下拉列表包含几个需要 javascript/jquery 代码才能不激活行链接的链接。问题是当你切换选项卡时，除非你重新加载页面，否则 js 代码不会运行（重新加载时活动选项卡保持不变），但网站的用户不应该每次在它们之间切换时都重新加载页面标签。

我完全不知道为什么 .js 文件只适用于活动选项卡。一切都是用 Wicket/Java 编写的，为此页面使用了很多 Ajax 事件。

JavaScript：

$(document).ready( function () {

$('.dropdown-menu > li > a').on('click', function(event) {
    event.stopPropagation();

    alert('Propagination Stopped');
});

编辑： 好的，所以我现在知道如果我添加它会起作用

location.reload();

当标签被点击时，但我有点想避免这种情况，因为这会增加不必要的加载时间。

Answer 1

我发现了问题所在。由于我将 Ajax 用于必须添加的选项卡 $(document).ajaxComplete(function { myFunction });

并把onClick 放在那里。这样每次我切换标签时它都会正确加载。

非活动选项卡中的不可见表具有 display: none;，这意味着当它们设置为 display: visible; 时，它不是 DOM 的一部分。所以除非重新加载页面，否则脚本不会运行。

不喜欢回答我自己的问题，但觉得应该分享信息。

谢谢你们的帮助！

Answer 2

您还没有展示如何定义脚本元素并将其添加到 DOM，因此很难具体说明。

一旦script 元素被添加到 DOM（直接或通过标记），它就会运行一次。如果您希望该脚本定义的任何函数再次运行，则必须运行它们。因此，在您的选项卡切换代码中，添加代码以调用一个函数，如果您希望它为该选项卡运行。

你也没有展示你是如何加载标签内容的，或者标签内容是否定义了script标签。最好不要让标签内容包含不必要的脚本。取而代之的是，在定义主要功能的页面上加载一个主脚本文件，然后最多在动态加载的选项卡内容中只有一个 script，它对已经执行的单个函数调用-加载的代码。如果您通过 jQuery 的 load 加载，它将为您调用脚本，除非您使用带有 load 的片段标识符。 （如果您使用带有load 的片段标识符，它会完全忽略内容中的脚本。）

Answer 3

我想这会对你有所帮助！ html代码示例

<ul id="ajaxContainer">
    <li>the default content in your app</li>
</ul>
<nav id="pagination">
    <ul>
        <li><a class="active" href="/ajaxpath1">1</a></li>
        <li><a href="/ajaxpath2">2</a></li>
        <li><a href="/ajaxpath2">2</a></li>
    </ul>
</nav>
<script src="jquerypath/jquery.js"></script>
<script src="appjspath/app.js"></script>

您的 app.js 中的代码如下所示

$(function() {
    var $ajaxContainer = $('#ajaxContainer'),
        CLSA = "active",
        DOT = ".",
        $pagination = $('#pagination'),
        hasElMakeShow = function($el) {
            //just make elment show hide
            $el.show().siblings().hide();
        },
        appendNewEl = function($el) {
            //new data requested should be append to container element
            $ajaxContainer.append($el);
            hasElMakeShow($el);
        },
        initBindEl = function(){
            //init bind first active pagination el with its data elment
            var $li = $ajaxContainer.find('>li'),
                $active = $pagination.find(DOT + CLSA);
            $active.data('el', $li);
        },
        switchNavA = function($el) {
           //do some pagination switch active class work
           $el.addClass(CLSA).closest('li').siblings().removeClass(CLSA);
        };

    initBindEl();//first bind current pagination

    $pagination.delegate('>li a', 'click.page', function(e){
        e.preventDefault();//prevent default jump
        var $me = $(this),
            isActive = $me.is(DOT + CLSA),
            $targetEl = $me.data('el');
        if(!isActive) {
            if($targetEl.length) {
                hasElMakeShow($targetEl);
            } else {
                var url = $me.attr('href');
                $.get(url, function(data){
                    var $respondEl = $(data);
                    $me.data('el', $respondEl);
                    appendNewEl($respondEl);
                    switchNavA($me);
                });
            }
        }

  });
});