How do I overwrite old jQuery click event

Question

Hey Everyone,

I just came across this weird problem that is happening in IE. In the html I am adding an onclick event to an element that calls a function to change a page like this,

onclick="changePage(1, 2);"

Inside the changePage function I am changing the currentPageNum, and nextPageNum of the forward and backwards buttons when the function is called like this,

function changePage(currentPageNum, nextPageNum) {

  var pageValidated = true;

  //If the current page content validates, then we can change the page
  if(pageValidated) {
    //Add new events to both arrow buttons
    $('#goBack').attr('onclick', '').unbind().click(function() {
        changePage(nextPageNum, parseInt(nextPageNum) - 1);
    });

    $('#goForward').attr('onclick', '').unbind().click(function() {
        changePage(nextPageNum, parseInt(nextPageNum) + 1);
    });
  }
}

I added the attr('onclick', '').unbind() in order to remove the old onclick event and then add the new one. This is working fine in FF, but in IE it is calling both the new click event and the old at the same time for some reason. I thought that when you attach a new click event that the old one went away, but that does not seem to be the case now. How can I get this working in IE?

I think I know whats happening now. When the changePage function is called, it is removing the old onclick event, adding the new one after the first onclick event and then calling the onclick event that was just added directly after the first one was called. It is acting as if I have 2 function calls inside the same onclick event.

I am using jQuery version 1.4.2. I cut out extra content from this function to simplify it, but this is the part that is causing the problem.

Thanks for any help, Metropolis

Answer 1

The correct way to unbind an event using jQuery is:

$('#goBack').unbind("click").click(function() {
    changePage(nextPageNum, parseInt(nextPageNum) - 1);
});

if for some reason that still fails you can try:

$("#goBack").click(undefined);

or:

document.getElementById("goBack").click = undefined;

Answer 2

I believe that the best way to fix this problem is to not create anymore inline javascript events along with jQuery events. My guess is that this causes jQuery to not know what events are taking place elsewhere, so both events get run. What I should do here instead is put the following code into an external javascript file

$(function() {
    $('#ele').click(function() {
        changePage(1, 2);
    });
});

This will allow the event to be changed by jQuery whenever it gets inside the changePage function. Please correct me if this is wrong logic.

Metropolis