停用点击事件的最佳方法是

Question

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; , ie do nothing. I'm wondering if there's a more elegant and proper way of accomplishing this behavior.

Thank you for your time.

Answer 1

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>");
    });
})

Answer 2

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.

Answer 3

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>");
    });
  }

Answer 4

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>");

});

Answer 5

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> 

Answer 6

Do it in a simple way like this

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