Develop Reference

Why does this equivalent of "on.("click", function) [..]" automatically fires a click even when written in pure JavaScript?

This code:
var el = $(".threeLines");
el.on("click", function(){
$(this).toggleClass("active");
});
Helps me add the class "active" on a click event to create a nice effect on a menu icon, like this:
I rewritten the code to pure JS as below:
function test_xz(s) {
s.classList.add("active")
}
var el_container = document.getElementsByClassName("threeLines")[0];
el_container.addEventListener("click", test_xz(el_container));
But it instantly fires when the document is ready and it completely messes up like this:
I understand that jQuery's "$" corresponds to querySelector, but I also tried that and it didn't work.
After a bit of research (removing every other function that could be related, logging everything) I concluded that the problematic line is the addEventListener itself, I wrote:
el_container.addEventListener("click", console.log("Hey!"));
and it would just log "Hey!" on page-load.
How can I make this work?

In the below line you are calling the method test_xz with an argument.
el_container.addEventListener("click", test_xz(el_container));
Instead, change to the following (without changing the function definition of test_xz) :
el_container.addEventListener("click", function(){
test_xz (el_container);
});
To toggle the active class:
function test_xz(s) {
s.classList.toggle("active");
}
In your question, you mentioned jQuery's "$" corresponds to querySelector and I think it's no. $ is just another name (alias) for jQuery and what goes inside the () after $ is a selector.

el_container.addEventListener("click", test_xz(el_container));
You're calling text_xz(). That's why the handler is executing. It is for the same reason that passing console.log("Hey!") logs that string to the console.
To pass the handler on its own without calling it, simply pass the handler name:
el_container.addEventListener("click", test_xz);
In addition, you incorrectly ported toggleClass() to classList.add() and not classList.toggle():
function test_xz(s) {
s.classList.toggle("active")
}

Pass function to click event jQuery

I am just wondering what I need to do to pass the clickAssistanceToggle function to my jQuery click event, I have taken a look at some of the answers on here and can't find a simple solution to this.
So far I have this code:
function clickAssistanceToggle() {
$('.car-hub-header-help, #assistance-overlay, .assistance-close-btn').click(function(){
$('#new-car-hub, #new-car-offer').toggleClass('assistance-active');
$('#pulman-assistance').toggleClass('pulman-assistance-active').css("top", fixedPositionCalculator);
$('#assistance-overlay').toggleClass('assistance-overlay-active');
$('#new-car').toggleClass('assistance-active-body');
$('#new-car-offer-cta').toggleClass('assistance-active-cta');
});
};
$('.new-car-general-enquiry-btn').click(function(){
clickAssistanceToggle();
});
As you can see the function wont run like this because it hasn't been passed as a parameter, I have tried passing the function like so:
$('.new-car-general-enquiry-btn').click(function(clickAssistanceToggle){
clickAssistanceToggle();
});
However this does not seem to work, any idea how I can pass that function to the click event? Thanks

You can call like this,
$('.new-car-general-enquiry-btn').click(clickAssistanceToggle);
Or
$('.new-car-general-enquiry-btn').click(function(){
clickAssistanceToggle();
});
Also there is a chance that, .new-car-general-enquiry-btn element is not being rendered at the time of binding the event. If so you need to wrap the code inside dom ready event.
$(document).ready(function() {
$('.new-car-general-enquiry-btn').click(function() {
clickAssistanceToggle();
});
});

Instead of
$('.new-car-general-enquiry-btn').click(function(clickAssistanceToggle){
clickAssistanceToggle();
});
You need to use
$('.new-car-general-enquiry-btn').click(clickAssistanceToggle);
Basically you need to pass the function to be executed when a click is performed on a .new-car-general-enquiry-btn element.

How to make an onShow onHide event for jQuery for only applied element?

I am using the following code, to enable on-show and on-hide events. So, for example when I make a DIV visible, it will automatically call my custom function and do appropriate changes on the DIV at that moment automatically.
(function ($) {
$.each(['show', 'hide'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.trigger(ev);
return el.apply(this, arguments);
};
});
})(jQuery);
The problem is, it is called when any other element inside that main DIV is show()ned too.
So, when I do
$('.mother').on('show',function(){
if(...){
$(this).find('.child').show();
} else {
$(this).find('.child').hide();
}
});
for
<div class="mother">
<div class="child"></div>
</div>
It goes to infinite loop, as in jQuery on() method requires a selector for the second parameter and it is triggered for an event that happens on the children too if that second parameter is omitted or null.
I couldn't define that second parameter.
So making it
$('.mother').on('show','.mother', function(){
does not work, as it is already the mother...
I do not want to type:
if(event.target != event.delegateTarget){return;}
to every single callback function and I couldn't do it in the plugin code too as it doesn't have event object there...
These were what I have tried.
How can I solve this?
What can be the alternatives?
I want to be able to bind onShow functions to specific elements which shall never be called on events those happen on it's children.

If you want to run a custom function after show / hide on some elements and on others not you shouldn't change the $.fn.show() / .hide() itself. Instead you can pass your function as a callback parameter to .show() / .hide():
function custom() {console.log('custom: ', this);}
$(".mother").show(custom); // ---> custom: <HTMLElement>
Note that the callback is executed after show / hide have finished. So if you call them with duration:
$(".mother").show(2000, custom);
custom is executed 2 seconds later.

pause executing function on purpose

I have a simple .click() function with some functions in it:
$mario.on('click', this, function() {
var width_mario = $window.width()/2;
$contentw.animate({left: '100%', marginLeft: -width_mario, marginTop: 0}, 600);
$fixed.css({'background-color': '#510000', 'left': '25%'});
createMario();
trigger(); // fire trigger not until createMario() is finished with animation
});
inside the function of createMario() are loads of jQuery .animate()ions. What I intend to do is, to fire trigger not until the animations of createMario()are finished. Something like the return function you can do if an animation is finished BUT inside the click function.
Thanks
edit: and not with setTimeout() because the animations have a random speed.

You can't literally do that. What you need to do instead is pass a reference to the trigger function into createMario and have it call that function when the animations are finished. Assuming the animations are via jQuery, they have a callback they call when they're done.

pass it as a callback, something like this:
function createMario(calback_fn) {
...
animate({...}, {duration: 12345, complete: callback_fn});
...
}
Make sure you add it to the longest animate call.
Note that may need to slightly change the animate syntax, see http://api.jquery.com/animate/ for different argument options).
Then do:
...
$fixed.css({'background-color': ... as before... });
createMario(trigger);

You can also use element.promise.done(function() { trigger(); }); if you're animating 1 element in the createMario function, or you can attach it to the longest animated element also (the one that takes the longest to finish), and it will call the trigger() function after that element has finished animating.
Here's a jsFiddle I put together that exemplifies this: http://jsfiddle.net/WPHmY/2/

jQuery override an on() event with another on() event

I have 2 files, file 1 (head.tpl) contains this default function operation
$(document).on("click", "#blackout", function(){
closeSkyBox();
});
That is the default operation I want to run, and it works.
On my second page, I would like to override the operation that is in head.tpl with this:
$(document).on("click", "#blackout", function(){
closeSkyBox(function(){
pev_for_country = '';
});
});
So, now when I test the code, each one runs, so If I were to place an alert (for testing reasons) I get two alert boxes. How can I make it so only the one in the second page runs, and the one in head.tpl is disabled. Then when I don't override it say on a third page, the one in head.tpl runs?

Looks like you're looking for jQuery's .off
$(document)
.off('click', '#blackout')
.on('click', '#blackout', function () {
// ...
});

You can use .off to remove all event handlers, but you should be cautious: what if other libraries add event handlers that you don't want to remove subscribe to this event? Also, if you add an additional event handler at a later date, this would obliterate it.
A better approach, I think, is to create a function that you can override:
function blackoutClick() {
closeSkyBox();
}
And set up your click handler:
$(document).on("click", "#blackout", function(){
blackoutClick();
});
Or, as Paul pointed out in the comments below, you don't even need to wrap that handler in an anonymous function, you can just use the cleaner:
$(document).on("click", "#blackout", blackoutClick );
Then, in your second page, you can just modify that function:
function blackoutClick() {
closeSkyBox(function(){
pev_for_country = '';
});

I believe another way to do it is also to set the event to null...
$(document).on('click', '#blackout', null);
before you re-set it on your second page.