从 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

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

$(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);
});

希望对你有帮助。