Question

我有一个加载内容的简单方法，应将其替换为div元素：

=IMPORTRANGE("https://docs.google.com/...; "A1!C2:C5")

现在我加载每个包含以下代码的ajax HTML代码：

$("a[data-ajax='true']").on('click', function (event) {
        event.preventDefault();
        var goToLink = this.href;
        animateLink(this);
        $('#ajax-target').fadeTo(0.2, 0.5, function () {
            lastLink = currentLink;
            currentLink = goToLink;
            $('#ajax-target').load(goToLink, {}, function () {
                $('body').scrollTop(0);
                $('#ajax-target').fadeTo('slow', 1);
            });
        });
    });

我第一次点击加载ajax的链接，我看到＆＃39;正在运行...＆＃39;按预期在控制台上。我第二次这样做，＆＃39;跑步......＆＃39;在控制台上打印两次。第三次这个消息我在控制台上得到4次，依此类推。我无法弄清楚问题出在哪里。当我按照ajax请求加载HTML代码并按html（）方法替换它时，同样的问题。有人知道出了什么问题吗？

修改在这里得到答案后，我现在有以下代码：

<script>
console.log('Running...')
</script>

这是直接位于网站上。完成ajax请求后，不会删除此部分。总是改变的部分如下：

<script>
    var currentLink, lastLink;

    function animateLink(obj) {
        var el = $(obj);
        var animate = el.attr('data-animation');
        if (animate != undefined) {
            animate = animate.toLowerCase();
            animate = animate == 'false' ? false : true;
        } else {
            animate = true;
        }
        if (animate) {
            el.toggle('explode');
        }
    }

    $(document).ready(function () {
        $("a[data-ajax='true']").on('click', function (event) {
            event.stopImmediatePropagation();
            event.preventDefault();
            var goToLink = this.href;
            animateLink(this);
            $('#ajax-target').fadeTo(0.2, 0.5, function () {
                lastLink = currentLink;
                currentLink = goToLink;
                $('#ajax-target').load(goToLink, {}, function () {
                    $('body').scrollTop(0);
                    $('#ajax-target').fadeTo('slow', 1);
                });
            });
        });
    });

    function historyBack() {
        $('#ajax-target').fadeTo(0.2, 0.5, function () {
            var newLink = lastLink;
            lastLink = this.href;
            currentLink = newLink;
            $.get(newLink, {}, function (response) {
                $('body').scrollTop(0);
                $('#ajax-target')
                    .html(response)
                    .fadeTo('slow', 1);
            });
        });
    }
</script>

加载的页面是一个MVC页面，其中主框架不包含任何HTML或BODY标签，只包含需要替换的内容，此外还有脚本（我的脚本如何在上面）：

<div class="content-wrapper" id="ajax-target">
     @Html.Partial("LayoutContentHeader")
     <section class="content">
         @RenderBody()
     </section>
</div>

正如您所看到的，当我们处于ajax请求时，我只发送重要内容。

压缩链接的代码例如是：

@if (IsAjax)
{
    if (isMainLayout)
    {

    @Html.Partial("LayoutContentHeader")
    <section class="content">
        @RenderBody()
    </section>
    }
    else
    {
        @RenderBody()
    }



    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
}

没有链接（可以强制冒泡）。

Answer 1

尝试添加此代码

$("a[data-ajax='true']").on('click', function (event) {

    event.stopImmediatePropagation();

    var goToLink = this.href;
    animateLink(this);
    $('#ajax-target').fadeTo(0.2, 0.5, function () {
        lastLink = currentLink;
        currentLink = goToLink;
        $('#ajax-target').load(goToLink, {}, function () {
            $('body').scrollTop(0);
            $('#ajax-target').fadeTo('slow', 1);
        });
    });
});

参考：http://api.jquery.com/event.stopimmediatepropagation/

jQuery加载脚本执行很多次

1 个答案: