CODEWITHSUNDEEP
javascriptjquery
Donald Knuth Lied
Donald Knuth Lied

Reputation: 23

What is the best way to deactivate a click event from an

On my webpage I have a container that turns into something else when clicked, and then my intent was for it to stay the way it is after clicked:

                <div id="macheps-holder">
                   <p>Click here to see your browser's machine epsilon!</p>
                    <script type="text/javascript">
                        $(document).ready()
                        {
                            var temp1 = 1.0, temp2, macheps;
                            do {
                                macheps = temp1
                                temp1 /= 2
                                temp2 = 1.0 + temp1
                            } while (temp2 > 1.0)
                            var mh = $('#macheps-holder');
                            mh.click(function()
                            {
                                mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
                                mh.click(function()
                                {
                                    return;
                                })
                            });
                        }
                    </script>
                </div>

Also you can see, what I did was make the body of the click function to change the click function to return;, i.e. do nothing. I'm wondering if there's a more elegant and proper way of accomplishing this behavior.

Thank you for your time.

Upvotes: 0

Views: 74

Answers (6)

mhars
mhars

Reputation: 148

Do it in a simple way like this

function DoThisClick()
{
 //logic for clicking
  $("#yourbuttonid").unbind("click");
}

$("#yourbuttonid").bind("click",Dothis());

Upvotes: -1

Arun P Johny
Arun P Johny

Reputation: 388446

What you have done, is not doing what you think it is doing... In each click the first click handler will get executed that will reset the html of the element with the same text then will add a new empty click handler... next click onwards will execute the first handler as well as the newly added blank handler... So on the 4th click you will have the first handler executed once and the blank handler executed 3 times

Problem

$(document).ready(function() {
  var temp1 = 1.0,
    temp2, macheps, counter;
  do {
    macheps = temp1
    temp1 = temp1 / 2
    temp2 = 1.0 + temp1
  } while (temp2 > 1.0)
  var mh = $('#macheps-holder');
  mh.click(function() {
    counter = 0;
    log('default handler');
    mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
    mh.click(function() {
      log('click: ' + counter++)
      return;
    })
  });
})

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="macheps-holder">
  <p>Click here to see your browser's machine epsilon!</p>
</div>

<div id="log"></div>

Since you want the click handler to get executed only once, use .one()

$(document).ready(function () {
    var temp1 = 1.0,
        temp2, macheps;
    do {
        macheps = temp1
        temp1 /= 2
        temp2 = 1.0 + temp1
    } while (temp2 > 1.0)
        var mh = $('#macheps-holder');
    mh.one('click', function () {
        mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
    });
})

Upvotes: 2

Karlen Kishmiryan
Karlen Kishmiryan

Reputation: 7542

At first the jQuery's ready function is not correct. You should pass a callback to it, like this:

$(document).ready(function() { ... })

The second. You can create a separate function callback for the click event and add or remove from event listener list. So you can write the following:

function clickHandler(event) { ... }

// add
mh.on('click', clickHandler);

// remove
mh.off('click', clickHandler);

The final code will look like this:

$(document).ready(function() {
  var temp1 = 1.0,
    temp2, macheps;
  do {
    macheps = temp1
    temp1 /= 2
    temp2 = 1.0 + temp1
  } while (temp2 > 1.0)

  var mh = $('#macheps-holder');

  function clickHandler() {
    mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
    mh.off('click', clickHandler);  // remove click event handler
  }

  mh.on('click', clickHandler);  // add click event handler
})

You can read more about on and off functions of jQuery.

Upvotes: 1

Super Hornet
Super Hornet

Reputation: 2907

your codes have some problems. try this:

$(document).ready(function() {
  var temp1 = 1.0,
    temp2, macheps;
  do {
    macheps = temp1
    temp1 /= 2
    temp2 = 1.0 + temp1
  } while (temp2 > 1.0)
  var mh = $('#macheps-holder');
  mh.click(function(e) {
    mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="macheps-holder">
  <p>Click here to see your browser's machine epsilon!</p>
</div>

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 531

i hope u are looking for the click function to work for only first time '

for that u can take a global variable 

var count = 0;
mh.click(function()
{
++count;
if(count>=1)
{
    return ;
}
 mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");

});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

You can make use of .one() here that will allow to click your link only once, see below code.

one() API doc

<script type="text/javascript">
   $(document).ready()
   {
     var temp1 = 1.0, temp2, macheps;
     do {
          macheps = temp1
          temp1 /= 2
          temp2 = 1.0 + temp1
     } while (temp2 > 1.0)

    var mh = $('#macheps-holder');
    mh.one('click',function()
    {
       mh.html("<p>Your browsers machine epsilon is <code>" + macheps + "</code></p>");
    });
  }

Upvotes: 0

Related Questions