javascript - Quicksand.js 干扰 Bootstrap 模态

Question

我一直在尝试使用 Bootstrap Modal 功能和流沙排序插件制作灯箱作品集。我原来关注了this tutorial我不得不稍微努力一下才能在 Bootstrap 3.0.0(我正在使用的版本)中工作，但它正在工作。我决定我需要对模态框有更多的控制，所以我取出了 bootbox 插件，只使用了 bootstrap 中的模态 js。现在，当我按下缩略图时，模态框会正常弹出，但是如果我按下其中一个排序导航按钮，该框将弹出模态中的最后一张图像(不是正确的图像)或者第一件事你做的是排序然后点击，模式框弹出但它是空的。该教程提到了问题和解决方法:

"Inherently, Quicksand will nullify Bootstrap’s modal feature as soon as you interact with any of the categories. That is, the modal works before firing Quicksand, but not after. However, we’ve easily avoided this issue by defining our Bootbox function earlier. As shown above, we then used “gallery” as an attribute inside the quicksand() function and setup $(document).ready(gallery);. Now modal will work as expected both before and after selecting a filter/category."

但它似乎不适用于普通的 Bootstrap 模式。我能找到的唯一类似问题是 this one ，答案是加回调，因为流沙排序的对象其实是新的对象，没有受到模态脚本的影响，但是我加了回调就没有效果。

这是我的代码(我省略了所有其他缩略图)

    <div class="container well well-lg">
<ul class="filter nav nav-pills">
    <li data-value="all"><a href="#"><h6>All</h6></a></li>
    <li data-value="Historical"><a href="#"><h6>Historical</h6></a></li>
    ...
</ul>

<hr>
<ul class="thumbnails">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" data-id="id-1" data-type="Historical">
        <a class="thumbnail" data-toggle="modal" data-target="#myModal" id="joan1" href="#" data-image-id="" data-title="Joan of Arc" data-caption="Digital, Junior Thesis subject Crime and Punishment, 2015" data-image="/images/joan1.png">
           <img alt="" src="/images/thumb_joan1.png"></a>
    </li>
    ...
</ul>

</div>

<!-- Modal -->
<div class="modal modal-wide fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="modal-title" id="myModal-title"></h3>
        </div>
        <div class="modal-body">
            <img id="myModal-image" class="img-responsive" src="">
        </div>
        <div class="modal-footer">
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
            </div>

            <div class="col-md-8 text-justify" id="myModal-caption">

            </div>

            <div class="col-md-2">
                <button type="button" id="show-next-image" class="btn btn-default">Next</button>
            </div>
        </div>
    </div>
</div>
</div>

这是我的javascript

<script src="/Scripts/jquery.quicksand.js" type="text/javascript"></script>

<script>

    $(document).ready(function () {

        loadGallery(true, 'a.thumbnail');

        $(".modal-wide").on("show.bs.modal", function () {
            var height = $(window).height() - 200;
            $(this).find(".modal-body").css("max-height", height);
        });

        function disableButtons(counter_max, counter_current) {

            $('#show-previous-image, #show-next-image').show();
            if (counter_max == counter_current) {
                $('#show-next-image').hide();
            } else if (counter_current == 1) {
                $('#show-previous-image').hide();
            }
        }

        function loadGallery(setIDs, setClickAttr) {
            var current_image,
                selector,
                counter = 0;

            $('#show-next-image, #show-previous-image').click(function () {
                if ($(this).attr('id') == 'show-previous-image') {
                    current_image--;
                } else {
                    current_image++;
                }

                selector = $('[data-image-id="' + current_image + '"]');
                updateGallery(selector);
            });

            function updateGallery(selector) {
                var $sel = selector;
                current_image = $sel.data('image-id');
                $('#myModal-caption').text($sel.data('caption'));
                $('#myModal-title').text($sel.data('title'));
                $('#myModal-image').attr('src', $sel.data('image'));
                disableButtons(counter, $sel.data('image-id'));
            }

            if (setIDs == true) {
                $('[data-image-id]').each(function () {
                    counter++;
                    $(this).attr('data-image-id', counter);
                });
            }
            $(setClickAttr).on('click', function () {
                updateGallery($(this));
            });
        };


        function gallery() {

        }
        var $itemsHolder = $('ul.thumbnails');
        var $itemsClone = $itemsHolder.clone();
        var $filterClass = "";
        $('ul.filter li').click(function (e) {
            e.preventDefault();
            $filterClass = $(this).attr('data-value');
            if ($filterClass == 'all') { var $filters =              $itemsClone.find('li'); }
            else { var $filters = $itemsClone.find('li[data-type=' +   $filterClass + ']'); }
            $itemsHolder.quicksand(
              $filters,
              { duration: 1000 },
              loadGallery
              );
        });
    });
    $holder.quicksand($filteredData, {
        duration: 800,
        easing: 'easeInOutQuad'
    }, gallery);
    $(document).ready(gallery);
</script>

这里是 live page在哪里可以看到问题。我对此很陌生，所以希望我只是搞砸了一些基本且可修复的东西。在此先感谢您的帮助!

Answer 1

您好，您的缩略图点击事件在过滤后不会触发，过滤时您正在创建元素的克隆并将它们添加回 DOM，因此您尝试将点击事件绑定(bind)到页面上尚未存在的元素，修复绑定(bind)到始终在页面上的元素，然后将变量“setClickAttr”用于选择器过滤器

即改变

$(setClickAttr).on('click', function () {
    ....
});

到

$(document).on('click', setClickAttr, function() {
    ....
});

这Turning live() into on() in jQuery更多地讨论绑定(bind)到必须首先存在的元素