2

我正在尝试基于按钮单击功能添加和或删除小部件。它可以工作，但是一旦调用该函数，它就会做一些奇怪的事情，即在任何鼠标单击时调用代码，而不仅仅是在 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>

感谢您的任何帮助！

4

2 回答 2

4

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

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

希望能帮助到你。

于 2014-05-14T11:44:54.690 回答
1

以下是将小部件添加到 gridster 网格所需的 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>
于 2015-10-19T14:27:41.340 回答