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代码中，初始化您的网格后添加：

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

希望它有所帮助。

Answer 2

下面是将小部件添加到网格网格所需的jQuery和HTML。

<强> jQuery的：

$(document).on( "click", "#addWidgetButton", function(e) {
    e.preventDefault(); 
    gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);
});

<强> HTML：

<button id="addWidgetButton" style="float: right;">+</button>

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

2 个答案: