Double click event is not working If the content is empty

Question

I am using double click event on a <span></span> to toggle visibility of control in my MVC application.

<span ondblclick="myFunction()">m.Value</span>

where m is my model.

In the above code, span content is m.Value, which can be empty.

When m.Value is empty, ondblclick() event is not fired. Is there any workaround for this.?

Answer 1

If a span is empty it doesn't have any width or height, therefore you can't click it. To resolve this you can set your span do display block or inline-block and set a specific width, height:

span.model {
   display: inline-block;
   width: 50%; /*or 100px, ... */
   height: 50%; /* or 100px, ... */
}