javascript - Ajax 请求成功，但无论如何都会继续到目标 url

Question

我正在处理一个页面，该页面包含 div 中的各种 Youtube 视频缩略图，每个缩略图都附有链接 <img>并在容器上使用 Masonry 来控制类切换以调整所选视频的大小。

想法是 div被点击，这会触发 masonry 改变 CSS 并且还会触发 .ajax()请求 django 返回所选视频的模板。 (当您再次选择它以返回缩略图模板并使用 Masonry 重置为正常时，将执行相反的操作)。

目前我有两个 javascript 函数，一个在 div 上触发 masonry ，另一个在视频链接上触发 ajax 请求；

<script>
(function($) {
    $(document).ready(function() {
        var container = $('.masonry'), masonry;
        //masonry = new Masonry(container[0]);
        container.masonry('stamp', container.find('.stamp'));

        container.unbind('click').on('click', '.item', function() {
            var $this = $(this),
                this_link = $this.find('a'),
                $this_link = $(this_link),
                this_href = $this_link.attr('href'),
                video_id = $this.attr('data-video-id'),
                gigante = $this.hasClass('gigante'),
                selector = 'div#panel-area.video_grid div.masonry div.item.' + video_id;

            $.ajax({
                type: "GET",
                async: false,
                url: this_href,
                timeout: 5000,
                data: {'g': gigante},
                dataType: 'html',
                success : function(data) {
                    $(selector).html(data);
                    container.find('.item').removeClass('gigante');
                    $(this).toggleClass('gigante', !gigante);
                    container.masonry();
                    console.log('Selector: ' + selector + '\nSuccess');
                }
            })
            .done(function(msg){
                console.log('Done: ' + msg);
            })
            .fail(function(jqXHR, textStatus){
                console.log('Failed: ' + textStatus);
            });

        });
    });
})(jQuery);    </script>

和 HTML；

<div class="masonry js-masonry" data-masonry-options='{ "stamp": ".stamp", "isOriginLeft": false }'>
    <div class="mpus stamp">            
    </div>
    <div class="item video {{ object.id }}" data-video-id="{{ object.id }}">
        <a class="GetYoutubeVideo" href="{% url 'show_video' video_id=object.id %}">
            <i class="icon-play-circled play"></i>

            <span class="title">
                {{ object.get_title|slice:":20" }}...<br/>
                {{ object.date_created|date:"d/m/Y" }}
            </span>
            {{ object.get_img_tag }}
        </a>
    </div>
</div>

我本质上是一个 javascript 新手，所以我确信这是一个非常基本的问题。当我使用 async 通过 chrome 开发工具运行它时disabled 我看到 ajax 请求返回了预期的内容，但最终到达了目标页面，而不是将内容加载到 $(selector) 中。正如预期的那样。 当我启用 async它只是立即失败。我一直在阅读文档多年，但感觉我没有任何进展。任何帮助将不胜感激。

Answer 1

要避免默认的点击操作，请按如下方式修改您的点击处理程序:

.on('click', '.item', function(e) {
    var ...

    e.preventDefault();

    $.ajax({

        ...
    )}

    ...
})

将 e 添加到点击处理函数意味着事件详细信息在函数中可用 - 在 e 对象上运行 preventDefault() 防止默认操作发生的方法 - 例如，超链接将不再导航到其目标。

事件通常以下列方式发生，尽管这不是一个深入的总结:

在 a 元素上发生点击事件。

点击事件开始搜索事件处理程序。如果在导致事件的元素上找不到，那么该事件将在 DOM 树中“冒泡”，一次一层，直到它到达根 DOM 元素并且无法继续前进，或者找到点击处理程序。

在任何时候，只要找到点击处理程序，就会执行点击处理程序中的代码。如果点击处理程序在事件对象上设置了 preventDefault()，或者返回 false，则不会采取进一步的操作。

如果点击处理程序既不返回 false 也不设置 preventDefault()，那么除了您自己的事件处理程序之外，还将执行原始浏览器默认操作。

您的完整代码及修改:

<script>
(function($) {
    $(document).ready(function() {
        var container = $('.masonry'), masonry;
        //masonry = new Masonry(container[0]);
        container.masonry('stamp', container.find('.stamp'));

        container.unbind('click').on('click', '.item', function(e) {
            var $this = $(this),
                this_link = $this.find('a'),
                $this_link = $(this_link),
                this_href = $this_link.attr('href'),
                video_id = $this.attr('data-video-id'),
                gigante = $this.hasClass('gigante'),
                selector = 'div#panel-area.video_grid div.masonry div.item.' + video_id;

            e.preventDefault();

            $.ajax({
                type: "GET",
                async: false,
                url: this_href,
                timeout: 5000,
                data: {'g': gigante},
                dataType: 'html',
                success : function(data) {
                    $(selector).html(data);
                    container.find('.item').removeClass('gigante');
                    $(this).toggleClass('gigante', !gigante);
                    container.masonry();
                    console.log('Selector: ' + selector + '\nSuccess');
                }
            })
            .done(function(msg){
                console.log('Done: ' + msg);
            })
            .fail(function(jqXHR, textStatus){
                console.log('Failed: ' + textStatus);
            });

        });
    });
})(jQuery);
</script>