调用 onclick 覆盖的函数不起作用

Question

I have difficulty with a certain code right now. I tried to look on Internet and other StackOverflow, but none seems to work for me...

I have a function (defined in a code that doesn't belongs to me and that I can't change manually) which I am trying to override correctly. For each click of a certain button, it should call the new overrided function, but it doesn't work. It always call the first version of it.

In fact, I can't change the order of the code below unfortunately.

<script>
$('button').click(select_options);

function select_options(){
     // some TO DO here
}
</script>

In another file that I can change, I did:

<script>
window.select_options = function() {
      // I redefine the function here as what I want
}
</script>

When I click on a button, it calls the first definition of function "select_options". How can I fix and override correctly the function which it will be called by a click of the user on buttons?

Answer 1

You will need to unbind this specific event handler and rebind new one. You of course need to be careful and not to remove other handlers. You sould do it like this for example:

$('button').off('click', select_options).on('click', function () {
  console.log('B')
})

Here is a demo of how it preserves other handlers:

 $('button').click(select_options).click(function () { console.log('other handler') }) function select_options() { console.log('A') // Remove original select_options and bind version B $('button').off('click', select_options).on('click', function () { console.log('B') }) }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Test</button>