Question

function insertQuestion(form) {
    var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>";
    if (qnum == <? php echo(int) $_SESSION['textQuestion']; ?> ) {
        $('#mainPlusbutton').replaceWith(x);
    }
    //append rows into a table code, not needed for this question
}....
$('.plusimage').live('click', function () {
    plusbutton($(this));
});

function plusbutton(plus_id) {
    // Set global info
    plusbutton_clicked = plus_id;
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}

<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>
<table id="questionBtn" align="center">
  <tr>
    <th>
      <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
    </th>
  </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();?

Could unbind click work in this situation. I don’t want to use href=# because I don’t want to include # at the end of the url

Answer 1

You should use $('.plusimage').off('click'); to disable click events (unbind and live are deprecated on jQuery < 1.7 , but still supported).

If you are looking for a way to allow only one click on an element you can use this:

function insertQuestion(form) {   

    var x = "<img src='Images/plussigndisabled.jpg' width='30' height='30' alt='Look Up Previous Question' class='plusimage' name='plusbuttonrow'/><span id='plussignmsg'>(Click Plus Sign to look <br/> up Previous Questions)</span>" ;

    if (qnum == <?php echo (int)$_SESSION['textQuestion']; ?>) {
       $('#mainPlusbutton').replaceWith(x);
       //If the condition hold, then deactivate the click event!
       $('form table a').addClass('disabled');
    }
    else{
       //If the condition is false, click event is activated removing the disabled class
       $('.form table a').removeClass('disabled');
    }
    //append rows into a table code, not needed for this question
}

Add this click event and remove the onclick="return plusbutton(); inside link element:

//Click event activated only if the disabled class is not set
$('form table a:not(.disabled)').on('click', function() {
   plusbutton($(this));
});