Develop Reference

Capturing and bubbling events

I created the next jsfiddle:
http://jsfiddle.net/AHyN5/6/
This is my code:
var mainDiv = document.getElementsByClassName('mainDiv');
var div = mainDiv[0].getElementsByClassName('data');
mainDiv[0].addEventListener("click", function(e) {
alert('1');
});
$(mainDiv[0]).children('img').click(function (e) {
e.stopImmediatePropagation()
return false;
})
I want that click on the pink background will popup a message with value of 1(an alert message).
When clicking the yellow, I want nothing to happen.
I read this blog but with no success..
Any help appreciated!

I agree with the others stating to use jQuery or straight DOM calls.
Here is another shot at the jQuery solution - very similar to the one above. I went ahead and presented it because it targets the images directly - in case that's what you're really trying to accomplish.
$(function()
{ var mainDiv = $('div.pink:first'),
imgs = $('img');
mainDiv.click(function()
{ alert('1');
});
imgs.click(function(e)
{ e.stopImmediatePropagation();
});
});

You could add pointer-events: none; to the yellow class. That will cause those elements to not fire click events.
See here for more info https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

You have a mix of jQuery and DOM methods calls. Note also that for attaching event listeners, you should wait for all HTML document to be ready.
I'd recommend using either DOM methods ot jquery methods. Following is an example of jquery:
$(function(){
$('.pink:first').on("click", function(e) {
alert('1');
});
$('.yellow').on('click', function (e) {
e.stopPropagation();
});
})
See also this JSfiddle

Jquery not working on dynamically added button?

$(document).ready(function(){
var t = $("<div><button class='leaf' id='l2'>Awesome!</button></div>");
$('#l1').click(function(){
$('#num').text("four");
});
$('.oright').click(function(){
$('#num').text("Five");
$('.oright').after(t);
$('.oright').remove();
});
$('#l2').on('click', function(){
$('#num').text("Reset?");
});
});
The #l2 button doesn't have any functionality. I don't see any Syntax error, I looked it up and read that .on('click') was better than .click for dynamic elements, so I changed that but it still doesn't work.

You'll have to delegate to make that work
$(document).on('click', '#l2', function(){
$('#num').text("Reset?");
});
preferably you'd replace document with the closest non-dynamic parent element

Because you have defined the new button markup as a jquery object - t - you can assign the click handler to it.
$(document).ready(function(){
var t = $("<div><button class='leaf' id='l2'>Awesome!</button></div>");
$('#l1').click(function(){
$('#num').text("four");
});
$('.oright').click(function(){
$('#num').text("Five");
$('.oright').after(t);
$('.oright').remove();
});
/* use the t jquery object you have defined */
t.on('click', function(){
$('#num').text("Reset?");
});
});
Or delegate as #adeneo shows well

click event not working on hyperlink ajax data

Jquery Click event on table hyperlink does not work for table data that comes from ajax call, yet it works for static data entered.
Fiddle
$("a").click(function (e) {
var txt = $(e.target).text().replace(/\s/g, "%20");
alert(txt);
});

It is not working because you are adding data dynamically.
Use event delegation.
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.
Write:
$(".table").on("click","a",function (e) {
var txt = $(e.target).text().replace(/\s/g, "%20");
alert(txt);
});
Updated fiddle here.
Refer this document.

use $(document).on("click", "a", function (e) { instead of $("a").click(function (e) {

use on by jquery framework
it will work nice, if you do in such a way
$(document).on("click","selector",function(ev){
$(this)// your stuff..
});
as jquery doesn't bind events to dynamic content, so you need to parse the DOM again to find your element.

jQuery plugin: add eventlistener to element

I'm creating a small jQuery plugin for personal use which adds some content to the document when you hover over an element.
Currently this is the (simplified) code:
(function($){
$.fn.tempFnName = function(options){
var element = $('<div />');
return this
.each(function(){
$(this)
.on('mouseenter',
function(){
$('body')
.append(element);
})
.on('mouseleave',
function(){
element.remove();
});
});
};
})(jQuery);
For some reason this doesn't work. Looking around on google and stackoverflow didn't provide an answer. What am I doing wrong?
edit: As pointed out by WTK, there's nothing wrong with this code. The following code shows how the plugin should be implemented.
function appendAddAnchor(){
return $('<a />').tempFnName();
}
//even if I try the following, the click event will not work!
function appendAddAnchor(){
return $('<a />')
.click(function(){console.log('test')});
.tempFnName();
}
This is really strange to me, because I used to have Bootstrap' .tooltip() chained to the same $('<a />') and this worked without any issues...

I tried this in this fiddle: http://jsfiddle.net/Gm4jk/2/
(function ($) {
$.fn.tempFnName = function(options){
var element = $('<div/>');
element.html('aTest');
return this.each( function(){
$(this).mouseenter(function(){
$('body').append(element);
});
$(this).mouseleave(function(){
element.remove();
});
});
};
})(jQuery);
$('#start').tempFnName();
and it is working just fine. It may be that you are running into compatibility issues.
from the jQuery documentation:
"The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event."
I read that to mean if you are not using the shorthand bind method, you may not be getting the 'emulated' event instead jQuery may be looking for the actual event which, in all but IE, does not exist.
To be clear, I also got it to work with your code in jsFiddle. http://jsfiddle.net/zFKXx/2/

jQuery .on('change', function() {} not triggering for dynamically created inputs

The problem is that I have some dynamically created sets of input tags and I also have a function that is meant to trigger any time an input value is changed.
$('input').on('change', function() {
// Does some stuff and logs the event to the console
});
However the .on('change') is not triggering for any dynamically created inputs, only for items that were present when the page was loaded. Unfortunately this leaves me in a bit of a bind as .on is meant to be the replacement for .live() and .delegate() all of which are wrappers for .bind() :/
Has anyone else had this problem or know of a solution?

You should provide a selector to the on function:
$(document).on('change', 'input', function() {
// Does some stuff and logs the event to the console
});
In that case, it will work as you expected. Also, it is better to specify some element instead of document.
Read this article for better understanding: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

You can use any one of several approaches:
$("#Input_Id").change(function(){ // 1st way
// do your code here
// Use this when your element is already rendered
});
$("#Input_Id").on('change', function(){ // 2nd way
// do your code here
// This will specifically call onChange of your element
});
$("body").on('change', '#Input_Id', function(){ // 3rd way
// do your code here
// It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

Use this
$('body').on('change', '#id', function() {
// Action goes here.
});

Just to clarify some potential confusion.
This only works when an element is present on DOM load:
$("#target").change(function(){
//does some stuff;
});
When an element is dynamically loaded in later you can use:
$(".parent-element").on('change', '#target', function(){
//does some stuff;
});

$("#id").change(function(){
//does some stuff;
});

you can use:
$('body').ready(function(){
$(document).on('change', '#elemID', function(){
// do something
});
});
It works with me.

You can use 'input' event, that occurs when an element gets user input.
$(document).on('input', '#input_id', function() {
// this will fire all possible change actions
});
documentation from w3

$(document).on('change', '#id', aFunc);
function aFunc() {
// code here...
}