Firefox not registering click event on surrounding div

Question

I have the following code:

<div data-type="nameHolder">
   <input data-type="name" disabled="">
</div>

My idea is to keep the input disabled and only when you double click on it to enable it. However since click events are not detected on disabled elements I'm using a holder div. This works fine on Chrome, but not on Firefox. Any idea how to fix it?

Answer 1

since disabled elements don't fire events, you can use a div as a wrapper over your input and attach event handler to this div. when you double click on wrapper div, enable the input and hide the wrapper div.

 $('.wrapper').dblclick(function(){ $(this).prev('input').attr('disabled', false); $(this).hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-type="nameHolder"> <input data-type="name" disabled=""> <div class="wrapper" style="position:absolute; top:0;left:0;right:0;bottom:0"></div> </div> 

Answer 2

There is already a solution for your case in here . Author proposed to place an element in front of the disabled input and catch the click on that element for crossbrowser support.