Quicksand.js 干扰 Bootstrap 模态

Question

我一直在尝试使用 Bootstrap 模态函数和流沙排序插件制作灯箱作品集。我最初遵循 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，因此您尝试将点击事件绑定到元素还不在页面上，要修复绑定到始终在页面上的元素，然后将变量 'setClickAttr' 用于选择器过滤器

即改变

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

到

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

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

Quicksand.js 干扰 Bootstrap 模态

Quicksand.js interfering with Bootstrap Modals

javascript

quicksand

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3