使用 Gridster 处理点击事件答案

【问题标题】：Handle click event with Gridster使用 Gridster 处理点击事件
【发布时间】：2013-01-21 09:11:47
【问题描述】：

使用Gridster，我可以在开始和停止拖动时绑定事件。但是如何将事件绑定到单击项目？我需要能够选择一个项目才能删除它，或者为其设置一些属性。

【问题讨论】：

【解决方案1】：

您可以使用 jquery 单击事件来绑定单击元素。 Here is an example of the same. 以下是绑定的总体布局。

       $('.layout_block').click(function () {
                //function to set some properties using $(this)
                //setting an identifier to remove the element
       }

这里layout_block是gridster所有元素的类。

【讨论】：

这不适用于初始化后添加的元素。我尝试使用$('.layout_block').on('click', function() {});，但也没有用。
无论您使用哪种方法，新元素都必须注册其事件处理程序，这涉及重新初始化 .click() 函数。
啊，当然！现在它可以工作了：var widget = gridster.add_widget('<li>foo</li>', size_x, size_y); widget.click(myFunction);。谢谢。

【解决方案2】：

javascript $(document).on("click", ".layout_block", handler);

对我有用，即使是使用 gridster.add_widget(); 添加的小部件。

【讨论】：

【解决方案3】：

我有这个工作代码。

$(".gridster ul li button.close").click(function () {
        gridster.remove_widget($(this).parent());
});

所以在我的 Li 元素中，我有一个带有 class=close 的按钮，用于检测点击事件，我调用小部件方法 gridster.remove_widget 并传递 html 元素以将其删除。

快乐编码:)

【讨论】：