Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Sebastian Hewelt
Front End Web Development Techdegree Student 1,254 PointsWhy do you need to insert a function inside .click() to manipulate elements
Hello,
Why we could type something like:
$(".spoiler").append("<button>Something here</button>");
... without a function, and when we later in the video use .click() method, we need to include a function inside to show something:
$("button").click(function() { $(".spoiler span").show(); }); All the more they do practically similar things - adding/showing elements.
Why can't we do it like this:
$("button").click( $(".spoiler span").show(); );
Thanks for answers :)
2 Answers
Seth Kroger
56,413 PointsWhen you set click() or any other event you're setting what's known as a callback, or event listener. This is a function that gets called when an event occurs, so a function is expected.
If it's not wrapped in a function() {}, the statements get executed immediately. There's also the matter of a syntax error with the semi-colon in the parentheses. Thirdly, the event object is usually passed along as an argument that you can access through function(event) {}
Aaron Martone
3,290 PointsjQuery is still at its nature, JavaScript. It follows an order of operation. For example, if you run object.method(value), it first has to resolve object, then determine if there is a .method property that holds a function so that it can be invoked, to which it then determines value. In the statement:
// JS resolves what jQuery returns from $('button').
// It then confirms that it has access to a 'click' function.
// This function iterates over the jQuery set returned, assigning an event handler
// bound to the 'click' event to the (expected) function internally.
// But performing .show() on the spoiler span, just returns back the original jQuery
// return set, which is not a function, thus cannot be bound.
$('button').click( $('.spoiler span').show() );
As Seth indicates too, JS would execute that code immediately. The purpose of functions is to encapsulate statements into callable invocations.
A X
12,842 PointsA X
12,842 PointsSeth Kroger : Your use of programming vocab still goes over my head especially because we haven't talked about callback/event listeners. Let's see if I can translate...So another way of saying what you have is that we need the "anonymous function" included for structural purposes? Such as you can make a sentence without proper grammar like, "Ain't got time 4 dat" instead of "I don't have the time for that task." They both convey a similar point, but one has a more formal structure and if you were in an English class you'd get marked off for not having proper sentence structure. In this case, the program won't run without proper structure, so even though we don't need the function, it still has to be there?