Explanation of 'bind to click event' with scoping

Question

I have this problem, but in short: I have a self calling function (function TCC() {...})(); that generates two sections of elements, among other things. These elements are generated with the class btn. Another JQuery function of $('.btn').click(function () {...}; [with an appropriate console.log() ] is showing that all elements on the page with class btn are being clicked except the two aforementioned sections' elements.

One comment suggests "The issue occurs because you bind the click event, before the "column button generator" loop.", and a suggested solution of:

$.each(cols, function(i) {...}).done(function(){ //Add click event handler now });

First question is can someone elaborate on 'because you bind the click event, before the "column button generator" loop.'

Second question is about the proposed solution. Since I have two separate lines of code for generation, and the $('btn').on('click', function() {...}); block is over 50 lines, how do implement a solution without duplicating the lines of code, as I would assume the .done() method would require this. The page in question is here.

The current scope structure of the generation code relative to the .on('click') is as follows (sorry for pic, but StackOverflow didn't like the formatting for some reason):

Does the scope of the generation lines of code effect this, and if so, can I pull them out of the self calling function to fix the 'bind to click event' the suggestion spoke of?

I appreciate your help and expertise, as learning programming from scratch, these types of structure lessons are often left out of the online learning tools often included in textbooks.

Seems like the answer you want is already on the other question you have made. Check the answer of @barlasapaydin, that's the correct way to do what you want. — Marcelo De Zen, Aug 01 '12 at 09:59
that answer is very similar to my current function of `$('btn').on('click', function() {...});`. What is the difference between the two, and why are they yielding different results (mine gets all `btn`s except the two sections, the other gets them all). This difference is part of what I am trying to understand. — chris Frisina, Aug 01 '12 at 10:04
The problem is the context where binding for ".btn click" is done. The asnwer of @jibi is a good explaination. For example. If you do `$("body").on("click", ".btn", function(){...})`, then **every** element with a `.btn` class will fire this event. Because you binded it to the body element, the ultimate parent for **all** others visible elements in document. Read the jquery docs for a better explanation, this is really basic in any JS framework because is a basic concept of DOM itself. Google for "event bubble up html" to get a explanation of events behavior on DOM. — Marcelo De Zen, Aug 01 '12 at 10:08

score 3 · Accepted Answer · answered Aug 01 '12 at 10:02

You really should've posted the actual code. But no matter. I think the only issue why your click events are not being called, is that you've used an incorrect syntax.

The on function of jQuery, has the following syntax -

HTML

<div class='button_container'>
    <button> This is a button</button>
    <button> This is a button</button>
</div>

JavaScript

$('.button_container').on('click', 'button', function(){
    console.log('I have been clicked!');
});
//Note the the second selector 'button' within the declaration

Since the on function basically replaces the live and delegate functions, the handler is now defined for all buttons in div.buttons, irrespective of when and how it was created (meaning dynamically created). This can be bit misleading.

If you do a simple select of the sort

$('button').on('click', function(){ /* do something **/ })

jQuery assumes that you are talking about direct event binding - i.e, the dom element is already loaded. It won't affect any dynamically created elements (mind you, if you attach the bindings after the creation code, it will still work on those elements, as they are already present in the DOM).

Unless you provide the second selector, this the default behavior. This is a bit confusing, but moving on. If you want to target those elements before actually creating them, do something of this sort

//Right syntax
$(document).on('click','button', function(){ /* do something **/ })
//This will bind to all buttons

I have no `button`s, only elements with class `btn`, so should the code be : `$(document).on('click','.btn', function(){ /* do something **/ })` ? or : `$(document).on('click', $('.btn'), function(){ /* do something **/ })` or something else? — chris Frisina, Aug 07 '12 at 20:40

Explanation of 'bind to click event' with scoping

1 Answers1