How do I reassign a Javascript event using jQuery?

Question

When I log the click handler in js, (var clickHandler = button.onclick;) it gives the following as expected:

clickHandler:function () {
    alert("onclick - original onclick handler");
}

However, when I log the jQuery click handler (var clickHandler = jQuery('#button').click;), I get:

  clickHandler:function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)}

Why the difference? How do I get a handle on the function so I can reassign it to another event, eg. onmousedown?

(I need to reassign an existing js event that I have no control over, so it hasn't been added with jQuery).

    <input type="text" name="name_input" id="name_input" />
    <a href="#" id="button">Click</a>
    <script>
        var input = document.getElementById("name_input");
        var button = document.getElementById("button");
        input.onchange = function(event) {
            alert("Change");
        };

        //reassign onclick to onmousedown

        button.onclick = function() {
            alert("onclick - original onclick handler");
        };

        //reassign onmousedown handler
        var clickHandler = button.onclick;
        // var clickHandler = jQuery('#button').click;
        console.log('clickHandler:' + clickHandler);

        button.onmousedown = clickHandler;
    </script>

Jeremy Danyow · Accepted Answer · 2014-03-24 02:41:25Z

3

I think you want this:

var clickHandler = jQuery('#button')[0].click;

jQuery([selector]) returns an array.

answered Mar 24, 2014 at 2:41

Jeremy Danyow

26.5k12 gold badges92 silver badges137 bronze badges

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

Comments

Ja͢ck · Accepted Answer · 2014-03-24 02:39:58Z

0

You can assign the same click handler on more than one event:

$('#button').on('click mousedown', function() {
    // do something
});

answered Mar 24, 2014 at 2:39

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Comments

xdazz · Accepted Answer · 2014-03-24 02:42:28Z

0

jQuery('#button').click is just the method used to set the click event handler, it's used as

jQuery('#button').click(event_handler);

But not

jQuery('#button').click = event_handler;

So jQuery('#button').click won't give you the event_handler.

answered Mar 24, 2014 at 2:42

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:05:21Z

0

The button.onclick is the browsers native implementation of the click handler. See this raw HTML example which shows how to assign a click handler without using script tags. See this link for why this is a bad idea.

When you assign click handlers using jQuery, you're using the jQuery library to assign the click handler function to the button. This is why there was a different output when you printed jQuery('#button').click.

I would suggest that you stick with jQuery only and do not mix with calls to native JavaScript to manipulate events, like button.onclick = function(){};. See here

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Mar 24, 2014 at 3:23

Justice Fist

1114 bronze badges

Collectives™ on Stack Overflow

How do I reassign a Javascript event using jQuery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related