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?

Give Ur tried code in fiddle, may that will help to recode for firfox. — Sathish, Jul 27 '17 at 07:06
You can use `event delegation` instead. I hope that will work — Abin Thaha, Jul 27 '17 at 07:08

score 2 · Accepted Answer · answered Jul 27 '17 at 07:08

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>

score 1 · Answer 2 · answered Jul 27 '17 at 07:08

1

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.

answered Jul 27 '17 at 07:08

Andrew

449
3
7

Firefox not registering click event on surrounding div

2 Answers2