Handle click event with Gridster

Question

Using Gridster, I can bind events on start and stop dragging. But how can I bind event to a single click on an item? I need to be able to select an item in order to remove it, or to set some properties to it.

Answer 1

You can use jquery click events to bind single click on an element. Here is an example of the same. Following is the general layout of the binding.

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

Here layout_block is the class to all the elements of gridster.

Answer 2

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

worked for me, even for widgets that are added with gridster.add_widget();.

Answer 3

I have this working code.

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

So Inside my Li element, I have a button with class=close on detecting the click event, I call the widget method gridster.remove_widget and pass the html element for it to remove.

Happy Coding :)