Override javascript click event one time

Question

I would like to replace the default action of an click event for all anchors in a webpage. When I use this piece of code:

<html> <head> <script>     
var list=document.getElementsByTagName("a");
var isChecked = false;

function load () {    
    for (i=0; i<list.length; i++)
    {
        var old = (list[i].onclick) ? list[i].onclick : function () {}; 
        list[i].onclick = function () {                 
        if( !isChecked)
        {
            test(); 
            old();
        }
        else
            old();
        };  
    }
}    
function test() {
    alert("new action");
    isChecked = true;
}     
</script> </head> 
<body onload="load();">     
<a id="nr_1" onClick="alert('test');"> Anchor 1 </A>
<a id="nr_2" onClick="alert('test2');"> Anchor 2 </A>      
</body> </html>

When I click an anchor I get the alert out of the test function and then the default function of the second anchor (even when I click the first anchor). When I then again click one of the two anchors I always get the Alert from the second anchor. How do I put the original onclick functions back for each anchor element? When someone has an solution in jquery I would be glad as well.

EDIT

I was succesfull using this code:

function load()
{
$('a').attr('disabled', 'disabled');

$('a').click(function(e){
    if($(this).attr('disabled'))
    {
    alert("new");
    e.preventDefault(); 
    $('a').removeAttr("disabled");  
    this.click();
    }
});
}

On loading of the page this function is called giving all anchor elements a "disabled" attribute. After clicking the element the e.preventDefault() function disables the inline onclick function. Then I remove the "disabled" attribute and call the click function of the element again. because now the element doesn't have a "disabled" attribute only the default function is performed. I'm still open for "more elegant" solutions to this problem, but for now I'm a happy camper!

try this: onClick="alert('test'); return false;" it should stop the link from navigating and thus stay on the same page and have your variable values — Gerald Versluis, Jul 18 '12 at 13:10

score 2 · Answer 1 · answered Jul 18 '12 at 13:20

2

If you use jQuery you can combine a one-time handler with a persistent handler:

Documentation for .one() and .on()

Working Example: http://jsfiddle.net/Q8gmN/

Sample HTML:

<input type="button" id="click" value="click" />

Sample JavaScript:

button.one('click', function () {
  console.log('one time function fired');  
});

button.on('click', function () {
  console.log('persistent function fired');  
});

answered Jul 18 '12 at 13:20

jbabey

45,965
12
71
94

As a side note, I am not sure how jQuery will order these two events. If order is important, you may want to investigate this. Related question - http://stackoverflow.com/questions/2360655/jquery-event-handlers-always-execute-in-order-they-were-bound-any-way-around-t – jbabey Jul 18 '12 at 13:24
For additional information I am not able to edit the HTML code and the anchor tags have an existing onclick function (as inline attribute) – Fred Sterk Jul 18 '12 at 15:20
then just use the .one() handler. – jbabey Jul 18 '12 at 15:21

Override javascript click event one time

1 Answers1