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);
                });
            }
        }

  });
});