0

I have a Calculator which opens on focusing on the text box. This Calculator has outer-wrapper and child div containers which has calculator-buttons.

My problem is I want to close the calculator only on the clicking mouse out of the Calculator wrapper. But this code which I used $('html').bind('click', function ().... occurs every time I click on the Calculor-buttons and the above code scopes only on the calcultor-wrapper not on the child div containers which contains Calculator-Buttons.

Calculator Wrapper ### - <div class="calc-wrapper">

Calculator Button ### - <div class="calc-button-wrapper-operator">

<div class="calc-wrapper">
<div class="calc-button-wrapper-operator">
    <div class="calc-button">9</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">8</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">7</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">6</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">5</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">4</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">3</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">2</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">1</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">0</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">.</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">-</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">+</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">*</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">/</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">C</div>
</div>
<div class="calc-button-wrapper-operator">
    <div class="calc-button">=</div>
</div>

teenu
  • 684
  • 2
  • 8
  • 24
  • Use mouseenter and mouseleave events, see: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it/5805790#5805790 – benvds Aug 08 '12 at 07:01

3 Answers3

0

Try:

$('body, .calc-wrapper').click(function (e){
   $('.calc-close').hide(); // or your code to clode
});

You may remove body, I added it while your wrapper may not cover all the web page.

Alaa Badran
  • 1,848
  • 15
  • 19
0
$('body').unbind('click.closeCalc').bind('click.closeCalc', function(event){
     if(!($(event.target).hasClass('calc-wrapper') || 
               $(event.target).parents('.calc-wrapper').length == 1){
           // code to hide the calculator here.
     }
})
Ankur
  • 791
  • 4
  • 15
0

I found the solution for this.

var CurrCalculator = $(CalControl).parent();

    $($('html').not($(CurrCalculator))).bind('click', function (event) {...
   below this code to hide the current Calculator 
...});

First line gets the instance of the current container.

Expect this Variable entire HTML body is included. So no matter where you click with this area (var CurrCalculator) you calculator will be open. And if clicked outside the calculator closes.

teenu
  • 684
  • 2
  • 8
  • 24