Quicksand.js干擾Bootstrap模式

Question

我一直在嘗試使用Bootstrap Modal功能和流沙排序插件來制作燈箱產品。 我最初遵循了本教程 ，為了在Bootstrap 3.0.0（我正在使用的版本）中工作，我需要進行一些工作，但是它可以正常工作。 我決定需要對模式框進行更多控制，因此我拿出了bootbox插件，只使用了引導程序中包含的模式js。 現在，當我按縮略圖時，模態框會很好地彈出，但是如果我按排序導航按鈕之一，則該框會彈出，其中包含模態中的最后一張圖像（不是正確的圖像），或者第一件事您要做的是排序然后單擊，彈出的模態框為空。 本教程提到了該問題和解決方法：

“從本質上講，與任何類別進行交互時，流沙都會使Bootstrap的模式功能失效。也就是說，該模式在觸發流沙之前有效，但在之后不起作用。但是，通過更早地定義Bootbox函數，我們很容易避免了這個問題。如上所示，然后我們將“ gallery”用作quicksand（）函數中的屬性，並設置$（document）.ready（gallery）;。現在，模式將在選擇過濾器/類別之前和之后均按預期工作。

但它似乎不適用於普通的引導程序模式。 唯一的類似的問題，我能找到的就是這一個 ，答案是增加一個回調，因為由流沙排序的對象是沒有影響的模式腳本實際上新的對象，但是當我加入回調它沒”工作。

這是我的代碼（我忽略了所有其他縮略圖）

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

這是您可以看到問題的實時頁面 。 我對此很陌生，所以希望我能弄亂一些基本且可修復的東西。 在此先感謝您的幫助！

Answer 1

嗨，您的縮略圖點擊事件在過濾后不會觸發，過濾時您正在創建元素的克隆並將其添加回DOM，因此，您嘗試將click事件綁定到頁面上尚未存在的元素以進行修復綁定到始終在頁面上的元素，然后將變量“ setClickAttr”用於選擇器過濾器

即改變

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

至

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

jQuery中的將live（）轉換為on（）討論了更多有關綁定到必須首先存在的元素的信息