Question

    <form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">

    <table id="question">

    <tr>
    <td colspan="2">
    <a onclick="return plusbutton();">
    <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
    </a>
    <span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
    </td>
    </tr>
    </table>


    </form>

In the code above I am able to replace an image with another image when the if statement is met. But my problem is that when the image is replaced, it does not disable the on click event. My question is that when the image is replaced, how do I disable the onclick event onclick="return plusbutton();?

Answer 1

You disable from within the plusbutton function itself. First, pass the element into the function, like so:

<a onclick="return plusbutton(this);">

Then disable it in the function:

function plusbutton(element) {
    element.onclick = '';
    /* then do whatever plusbutton did before */
}

But since you are using jQuery, it’s better to use handlers. So give the link an id but not an onclick, like this:

<a id="plusbutton" href="#">

And use jQuery.one() to bind a click handler that happens just once:

$(document).ready(function() {
    $('#plusbutton').one('click', function(ev) {
        plusbutton();
        return false;
    });
});