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