将事件添加到DOM之前，将其单击事件添加到jQuery对象

Question

Attaching the click event to a JQuery object before adding it to the DOM is done like this I believe.

 $('.Button').on('click', '#Your-Selection', function () {
 console.log("yeahhhh!!! but this doesn't work for me :(");
 });

Is there a way to attach it to a span child of #Your-Selection. This does not work but something like:

 $('.Button').on('click', '#Your-Selection span', function () {
 console.log("yeahhhh!!! but this doesn't work for me :(");
 });

Answer 1

Please use like this

$(document).on('click', '#Your-Selection span', function () {
  console.log("yeahhhh!!! this will work for you :)");
});

this will attach click event to the span child of #Your-Selection

Answer 2

I think you are not asking the right question, please take a look at the jquery on method documentation: http://api.jquery.com/on/

If neither .Button exists (on DOM load) is better to attach it to the body, but if it exists is better attach to body that the whole document, or the closest tag you have in DOM

You should do something like this:

$("body").on("click", ".Button #Your-Selection span", function(){
  //whatever you want
});

Answer 3

As per the jQuery API documentation I have doubts with below solutions. The correct way I think is like as follows:

$('#Your-Selection').on('click','span',function(){
    console.log('yeahhhh!!! this will work');
});

so if the button is inside the span you can modify the above code as follow

$('#Your-Selection').on('click','span .Button',function(){
    console.log('yeahhhh!!! this will work');
});

So the event only need to be bubble up one level. If you use document or body event need to bubble up so many levels if your HTML structure is complex.