Jquery click without function

Question

I have the following code:

$(document).ready(function(){    
    $("button.continue").click(function(){
        $(this).html("Hello!");
    });
});

Which works perfect but I want to turn the whole thing into something like this:

$(document).ready(function(){    
    $("button.continue").click().html("Hello!");
});

My questions are:

Can I use click() and a following event, in this case html() in that way (Without turning to the function part)?
If not, why can I not do this since I would think of the workings behind this, something like: When user clicks on the element selected, change the HTML text in it to something else.
If this is not the way to think or reason the logic behind this, how should I approach this

This isn't how javascript works. It can't read your mind, and it requires following the spec to have it behave as you intend. Same is true for all languages by the way... — PinnyM
– PinnyM, Commented Feb 18, 2013 at 23:24
Fundamentally: no, you can't do this. .click() with no arguments is a shorthand for .trigger('click'). — Matt Ball
– Matt Ball, Commented Feb 18, 2013 at 23:37

insertusernamehere · Accepted Answer · 2013-02-18 23:38:59Z

5

A jQuery function returns the object itself, so you can chain methods like:

element.css('attribute', 'value').html('value').append('element').click(function() {});

But when binding an event handler, which is what .click() does, it has to store the logic in a callback that is called when the event happens.

An example of how the chaining actually works:

var testObject = {
    methodA : function() {
        // some logic
        return this;
    },
    methodB : function() {
        // some logic
        return this;
    }
}
// you can than simply call
testObject.methodA().methodB();

edited Feb 18, 2013 at 23:38

answered Feb 18, 2013 at 23:27

insertusernamehere

23.7k10 gold badges93 silver badges130 bronze badges

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

2 Comments

Nathan Osman Over a year ago

Actually... invoking click() without any parameters simulates a click event IIRC.

insertusernamehere Over a year ago

You're right - missed that last one in the hurry. It's now updated. Thanks for pointing that out.

mockaroodev · Accepted Answer · 2013-02-18 23:45:37Z

One could construct an API that works as you desire, but this is not, in fact, the way that jQuery works, which is the specific library you're using. The jQuery click method takes an event listener function which is called whenever a matched element is clicked. This is a typical functional programmer pattern which is commonly used in modern, event-based UI.

If you think this style of code is a bit unreadable, try CoffeeScript, a language that compiles down to javascript and makes common patterns like this more convenient to implement. The equivalent in CoffeeScript would be something like:

$(document).ready ->
    $('button.continue').click ->
        $(this).html "Hello"

For more information, check out: http://coffeescript.org/

Collectives™ on Stack Overflow

Jquery click without function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related