Question

read final edit for solution

I’m try update the onclick function of a link using jquery.

example would be best to explain:

html

<a href='' id='one_click' onclick='do_things_here("fighter","bitter",2)'>first clicker</a>

<a href='' id='two_click' onclick='do_things_here("abc","xyz",1)'>second clicker</a>

js (something like this – I don’t this is actually correct logically speaking)

function do_thing_here(data, info, source){

  *//things happen here*

  $('#two_click').click(function() {
    do_things_here(data,info,source)
    return false;

    });


}

That doesn’t work as it goes into a recursive loop as do_things_here gets set off when resetting the onclick on ‘two_click’.

edit

I’ve tried to set a reset flag to prevent do_things_here running on re-setting the onclick

function do_thing_here(data, info, source,reset){
      if (reset){
           return false;
      }


      *//things happen here*

      $('#two_click').click(function() {
        do_things_here(data,info,source,true)
        return false;

        });


    }

but that did seems a bit hack-ish and I don’t think it worked, I still had issues – I’ll try to do it again and see what the issues where.

I’ve tried unbinding and removeAttr/attr in an attempt to reassign as explained here

JavaScript: changing the value of onclick with or without jQuery

those methods do not seem to work in all browsers

• Using jQuery attr("onclick", js) doesn’t work with both Firefox and
  IE6/7.
• Using setAttribute(“onclick”, js) works with Firefox and IE8,
  but not IE6/7.
• Using onclick = function() { return eval(js); } doesn’t work
  because you are not allowed to use return is code passed to eval().

I’ve tried clearing out the onclick function in the html so nothing is set as default but that didn’t have any effect.

I can simply reset/rejig the link as follows

<span id='change_two'><a href='' id='two_click' onclick='do_things_here("abc","xyz",1)'>second clicker</a></span>

and then

 function do_thing_here(data, info, source){

      *//things happen here*

      $('#change_two').html("<a href='' id='two_click' onclick='do_things_here('+data+','+info+','+soutce+')'>second clicker</a>");


    }

or something similar but I’m wondering if there is a better cleaner way to do it?

—-edit:solution explained—-

just for those googling on to this page:

if you set the onclick via html you need to removeAttr ($(this).removeAttr('onclick'))

if you set it via jquery (as the after the first click in my examples above) then you need to unbind ($(this).unbind('click'))

Then you simply rebind with bind ($(this).bind('click',function(event){//the code/function call})))

//important – removeAttr: use ‘onclick’ and unbind: use ‘click’ – I think that was my main problem!

wasn’t sure if I should post this as an answer as the solution was right there in my question! Sorry folks for the brain failure.

I know in the question it states “not using unbind/removeAttr” – that was because I thought it was not working with those functions – but that was only due to the usage of the different functions.

Answer 1

Not sure what you are trying to achieve, but to unbind a click event, just use $(this).unbind(‘click’)