jQuery加载脚本执行多次

Question

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

$("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 HTML 代码：

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

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

编辑 在这里回答之后，我现在有了以下代码：

<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>

这直接位于网站上。 ajax 请求完成后，这部分不会被删除。始终更改的部分如下：

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

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

@if (IsAjax)
{
    if (isMainLayout)
    {

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



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

如你所见，当我们在一个ajax请求时，我只发送重要的内容。

点击链接的代码例如：

<a href="/wilhelmshaven/hse/" data-ajax="true" class="btn btn-block btn-social" style="color: white !important; background-color: rgb(243,156,18)">
     <i class="fa fa-th"></i>HSE
</a>

周围没有链接（这可能会导致冒泡）。

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/