Override jQuery on click handler function

Question

I'm a newbie when it comes to jQuery and I'm hoping if there's a way to override an existing on click function.

The code is as follows:

$('.woo-star-rating').on('click', function() {
    $('.woo-star-rating-filled').width( $(this).attr('data-rating') * 25 )
});

and I'd like to change the number 25 to 21 inside my own .js file.

$('.woo-star-rating').on('click', function() {
    $('.woo-star-rating-filled').width( $(this).attr('data-rating') * 21 )
});

What are you asking? Simply change 25 to 21 and save the js file — Vinnie James
– Vinnie James, Commented Sep 25, 2016 at 20:50
Seems like I didn't explain it properly. The first code is part of a plugin and therefore I can't modify the original code. — kiarashi
– kiarashi, Commented Sep 25, 2016 at 21:00

Soviut · Accepted Answer · 2016-09-25 20:58:08Z

4

You can remove the existing click event handler using the .off() method add your new click event.

var $rating = $('.woo-star-rating');

$rating.off('click');
$rating.on('click', function() {
    $('.woo-star-rating-filled').width( $(this).attr('data-rating') * 21 )
});

This can be chained into:

$('.woo-star-rating').off('click').on('click', function() {
    $('.woo-star-rating-filled').width( $(this).attr('data-rating') * 21 )
});

Here's a working example:

// add junk event
$('#test-button').on('click', function() {
  console.log('first button click');
});

// remove first event
$('#test-button').off('click');

// add new event, only this will fire on click
$('#test-button').on('click', function() {
  console.log('second button click');
});

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

edited Sep 25, 2016 at 20:58

answered Sep 25, 2016 at 20:51

Soviut

92.2k53 gold badges210 silver badges285 bronze badges

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

Collectives™ on Stack Overflow

Override jQuery on click handler function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related