How do you overwrite an inline javascript event using jQuery?

Question

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

Metropolis · Accepted Answer · 2010-04-22 02:24:31Z

1

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

answered Apr 22, 2010 at 2:24

Metropolis

6,63419 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karim79 · Accepted Answer · 2010-03-08 17:00:23Z

0

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;

answered Mar 8, 2010 at 17:00

karim79

343k67 gold badges420 silver badges409 bronze badges

7 Comments

Metropolis Over a year ago

But doesnt unbind() unbind all events?

Metropolis Over a year ago

and dont you have to add the attr('onclick', '') to fix the problem with some browsers not removing the events?

karim79 Over a year ago

@Metropolis - I'm not sure, that's the first I've heard of that. I use .unbind("someEvent") frequently without ever facing problems.

Metropolis Over a year ago

could jQuery 1.4.2 have anything to do with it?

Metropolis Over a year ago

The 2nd suggestion is causing an error "stack overflow at line: 0"

|

Collectives™ on Stack Overflow

How do you overwrite an inline javascript event using jQuery?

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related