Develop Reference

click event to a JQuery object before adding it to the DOM

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 :(");
});

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

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
});

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.

Image not clickable after loaded via AJAX

I have a set of images that are loaded via jQuery AJAX. For some reason, my click handler won't trigger when it is clicked.
JavaScript:
$(document).ready(function()
{
$('img.delete_related_sub').click(function()
{
alert('testing');
});
//I added this part to test, because the above wasn't working...
$(document).click(function(event)
{
alert(event.target.tagName+' '+event.target.className);
});
});
HTML:
<img data-rsid="2" class="delete_related_sub" src="image.png" />
So my 2nd click handler alerts me with "IMG delete_related_sub". But the first one isn't triggered. The is actually in a table that is actually in a pane run by bootstrap tabs, not sure if that'd actually help though.

Try it like this
$(document).on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Just replace document with a static parent of your image.

Use this:
$("body").on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Or, in the success: give this:
$('img.delete_related_sub').click(function() {
alert('testing');
});

Because the line to bind the event runs before the element is added, try using
$(parent).on('click', 'img.delete_related_sub', function() {});
where the parent is a static element that will be there for sure. This works because the event is bound to an element that actually exists, then checks to match your selector. See .on() for more details.
Something like
$(document).on('click', 'img.delete_related_sub', function() {});
would work fine.

$('.delete_related_sub').live("click", function()
{
alert('testing');
});
Use live event to listen clicks

$('body').on('click', '.anything', function(){})

$('body').on('click', '.anything', function() {
//code
});
doesn't work for anything right now and I can't figure out why. I'm able to anchor to anything else, say I just toss a #wrap div right inside the body. Then I'm able to do
$('#wrap').on('click', '.anything', function() {
//code
});
for any element I want.
Any idea what I could have done to disable this ability on the body element?
Thanks!

You should use $(document). It is a function trigger for any click event in the document. Then inside you can use the jquery on("click","body *",somefunction), where the second argument specifies which specific element to target. In this case every element inside the body.
$(document).on('click','body *',function(){
// $(this) = your current element that clicked.
// additional code
});

You can try this:
You must follow the following format
$('element,id,class').on('click', function(){....});
*JQuery code*
$('body').addClass('.anything').on('click', function(){
//do some code here i.e
alert("ok");
});

If you want to capture click on everything then do
$("*").click(function(){
//code here
}
I use this for selector: http://api.jquery.com/all-selector/
This is used for handling clicks: http://api.jquery.com/click/
And then use http://api.jquery.com/event.preventDefault/
To stop normal clicking actions.

Adding a function to onclick event by Javascript!

Is it possible to add a onclick event to any button by jquery or something like we add class?
function onload()
{
//add a something() function to button by id
}

Calling your function something binding the click event on the element with a ID
$('#id').click(function(e) {
something();
});
$('#id').click(something);
$('#id').bind("click", function(e) { something(); });
Live has a slightly difference, it will bind the event for any elements added, but since you are using the ID it probably wont happen, unless you remove the element from the DOM and add back later on (with the same ID).
$('#id').live("click", function(e) { something(); });
Not sure if this one works in any case, it adds the attribute onclick on your element: (I never use it)
$('#id').attr("onclick", "something()");
Documentation
Click
Bind
Live
Attr

Yes. You could write it like this:
$(document).ready(function() {
$(".button").click(function(){
// do something when clicked
});
});

$('#id').click(function() {
// do stuff
});

Yes. Something like the following should work.
$('#button_id').click(function() {
// do stuff
});

jQuery events and .load()

Never ran into this problem with jQuery before. I have the following:
$(document).ready(function() {
$('#browser_cat a').click( function() {
$('#browser_cat').hide();
$('#browser_cat').load('/api/browser/catchildren/'+$(this).attr('id'));
$('#browser_cat').fadeIn();
return(false);
})
});
Pretty simple stuff. And it works, however the data gathered by .load() doesn't retrigger the event. It is a drill-down category type thing ... so level-1 does the load but then leve-2 bails to the href rather than triggering the click() event again.
The loaded HTML is a #browser_cat with links, and the generated DOM is OK.
I appriciate this is elementary. Thanks in advance.
Answer modified code:
$(document).ready(function() {
$('#browser_cat a').live("click", function() {
$('#browser_cat').hide();
$('#browser_cat').load('/api/browser/catchildren/'+$(this).attr('id'));
$('#browser_cat').fadeIn();
return(false);
})
});

Use live event
Attach a handler to the event for all
elements which match the current
selector, now or in the future.
Replace
$('#browser_cat a').click( function() {
with
$('#browser_cat a').live("click", function() {