Кнопка Jquery/Gridster, влияющая на все предметы, а не на отдельные

Question

Я использую инфраструктуру Gridster для создания панели мониторинга, и у каждого элемента панели есть кнопки "удалить" и "закрепить". Однако проблема, с которой я столкнулся, заключается в том, что когда я нажимаю кнопку "закрепить" (которая блокирует панель на месте), она влияет на все панели в целом, а не на отдельные. Кнопка удаления работает нормально, хотя и удаляет одну панель. Я не могу добавить отдельные идентификаторы или классы, потому что панели должны быть общими. Почему кнопка булавки не работает в этом случае?

Штифт (который фиксирует все панели на месте, но предназначен только для блокировки одной рассматриваемой панели):

$(document).on("click", ".gridster .pin-button", function () {

    var pin = $(".gridster ul").gridster().data('gridster');
    if (pin.drag_api.disabled) {
        pin.enable($(this).parent());
    } else {
        pin.disable($(this).parent());
    }
});

Кнопка "Удалить" (которая удаляет соответствующую панель):

$(document).on("click", ".gridster .delete-button", function () {

    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());

});

Пример панели:

<div class="gridster row">
    <ul>
        <li class="gs_w" data-row="1" data-col="1" data-sizex="4" data-sizey="3">
            <button class="pin-button"><img src="pin.png"></button>
            <button class="delete-button"><img src="Close.png"></button>
            ... panel content ...
        </li>
    </ul>
</div>  

Answer 1

Так что в соответствии с https://github.com/dustmoo/gridster.js все, что мне нужно было сделать, это назначить статический класс для моего основного Gridster, то есть:

<script type="text/javascript">
    var gridster;

    $(function () {
        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            helper: 'clone',
            static_class: 'card_static',
            draggable: {
                items: ".gs_w:not(.card_static)"
            },
            resize: {
                enabled: true
            }
        }).data('gridster');
        });
</script>

А затем измените мой Pin JS на:

$(document).on("click", ".gridster .pin_button", function () {

if ($(this).parent().hasClass("card_static")) {

$(this).parent().removeClass("card_static")

} else{
$(this).parent().addClass("card_static")
}

});

Answer 2

Это потому, что ваш селектор для pin:

var pin = $(".gridster ul").gridster().data('gridster');

который может найти другой.gridster ul, и это должно быть связано с currnet gridster, чтобы вы могли иметь:

var pin = $(this).parent('.gridster');