gridster - 从 gridster 添加/删除单个小部件

Question

我正在尝试添加和/或删除基于按钮单击功能的小部件。它可以工作，但是一旦调用该函数，它就会执行一些奇怪的操作，即在任何鼠标单击时调用代码，而不仅仅是在 html 页面上单击按钮。因此，如果我单击 html 页面上的删除按钮，它将删除该小部件，但如果我单击任何其他小部件(不在按钮上)，它仍然会删除该小部件。我只想要在 html 按钮单击时调用的函数，而不是任何鼠标单击。这就像按钮正在初始化页面上的某些内容，以使任何鼠标单击都会调用删除函数。谁能解释为什么会发生这种情况以及我该如何解决它？我的代码如下:

function deleteWidget() {
    var gridster = $('.gridster ul').gridster().data('gridster');
    $(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });
    }

    function addWidget() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    $(document).on("click", ".gridster ul li", function() {      
        gridster.add_widget('<li class="gs_w">The HTML of the widget...</li>', 2, 1);
    });
    }

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"><button onclick="addWidget()" style="float: right;">+</button><h3>4</h3><span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"><button onclick="deleteWidget()"style="float: right;">-</button><h3>6</h3></li>

感谢您的帮助!

Answer 1

当您单击删除按钮时，您的代码将创建一个绑定(bind)，该绑定(bind)可以单击任何小部件，运行代码将其删除。

$(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });

您可以尝试将 html 更改为:

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"><button class="delete-button" style="float: right;">+</button><h3>4</h3><span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"><button class="add-button" style="float: right;">-</button><h3>6</h3></li>

并且，在您的 javascript 代码中，初始化 gridster 后添加:

$(document).on( "click", ".gridster .delete-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());
});

$(document).on("click", ".gridster .add-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');      
    gridster.add_widget('<li class="gs_w">The HTML of the widget...</li>', 2, 1);
});

希望有帮助。