Develop Reference

Jquery : binding a function to a click event of an element already bound

There's a first binding done on the click event of an element :
$("#element").on("click", function() {
//actions of function1
});
I would like to be able to bind another function to it, preserving the actions of the precedent function. Something like :
function elementClickAdd(elementId,newFunction){
//here, get the actions of function1
$("#"+elementId).on('click', function() {
//perform actions of function1
newFunction();
});
}
But I can't figure out how to make this.
Could you help me please ?
Thanks
Edit : thanks for helping, the solution is here : https://jsfiddle.net/9bo6dvmb/1/ enjoy :)

If you creating the id dynamically, you can call the event after generating only, so write this line after appending the ID. Like below
function dynamic_bind()
{
$("#test").append("<div id='tt'>test example</div>");
$("#tt").on("click",function(){
hi();
});
}
function hi()
{
alert("executed");
}
dynamic_bind();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Sample Div</div>

How to fade out elements on delete in MeteorJS

Take a look at: http://shopping-list.meteor.com. I want to fade out the items when they're deleted instead of having them instantly disappear, and I'm not sure how I'd implement this.
The code is at http://github.com/chintanparikh/shopping-list.
If anyone can set me on the right path, that'd be awesome.
Cheers!

Have you tried using the callback:
Template.item.events({
'click .close': function()
{
var self = this;
$(self).fadeOut('slow', function() { Items.remove(self); });
}
})
Update: added "self" as suggested by Rahul.

Try this:
Template.item.events({
'click .close': function()
{
//get parent (li) and fade it out.
$(this).parent().fadeOut();
Items.remove(this);
}
})

How can I set up a $.fn. function so it gets executed when called?

I have the following code:
function init() {
var $contentButtonPanel: JQuery = $('#content-button-panel')
$contentButtonPanel
.find('.arbo .toggle, .collapsible-list li:has(ul) > :first-child, .collapsible-list li:has(ul) > :first-child + span')
.click(function (event) {
$(this).toggleBranchOpen();
});
}
$.fn.toggleBranchOpen = function () {
this.each(function () {
$(this).closest('li').toggleClass('closed');
});
return this;
};
When I debug I can see that the $(this).toggleBranchOpen(); line is reached. However the code does not go inside that function.
Is this a problem with the way that toggleBranchOpen is declared? Note that the only time toggleBranchOpen is used is inside of the init function click event. Is it possible for me to move that code into the init and simplify things?

Please try this code:
function init() {
$('#content-button-panel')
.find('.arbo .toggle, .collapsible-list li:has(ul) > :first-child, .collapsible-list li:has(ul) > :first-child + span')
.click(function (event) {
$(this).closest('li').toggleClass('closed');
});
}
Since you indicated that you don't need the global function, I tried to simplify the code a bit.
Hope that helps.

The declaration is fine. Since you're modifying jQuery's prototype it will be immediately available to all jQuery Objects.
This is the line that is confusing me though,
var $contentButtonPanel: JQuery = $('#content-button-panel')
I would assume this is just cause you are copying and pasting from a larger file. My only advice as to help identify the problem would be to put some debug information inside this loop;
this.each(function () {
$(this).closest('li').toggleClass('closed');
});
Other than that, is it possible that you're selector isn't finding any li elements?

jQuery - Create new function on event

In JavaScript/jQuery, if I want to have a function that can run on an element that has been appended to the DOM, it has to be created after the element has been appended to the DOM. How can I do this? I heard one can do this with the jQuery .on() function, but I'm not quite sure how.
HTML:
<span>Hello Stackoverflow</span>​
JavaScript:
$("span").click(function () {
addMyElement();
});
$("p").click(function () {
removeMyElement(this);
});
function addMyElement() {
$("<p>Hello World</p>").appendTo("body");
}
function removeMyElement(myElement) {
$(myElement).remove();
}
Example on jsFiddle.net.

This is called delegated-events approach and it works as follows:
$("body").on("click", "p", function () {
// ...
});
Instead of body you can use any parent element of p.
DEMO: http://jsfiddle.net/wWXrK/6/

function addMyElement() {
$("<p>Hello World</p>").appendTo("body").click(function () {
removeMyElement(this);
});
}
Will work for you, not hugely readable with all that chaining though.

jQuery Multiclasses function

I'm trying to create function that will do this same thing for 3 different classes. The only problem is that every time when I hove over any of the divs it affect all the others instead just one.
Could anyone advice me please how can I make it work separately for each class on hover stage:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
Thank you for your help in advance.
Dom

If the divs have only one kind of subclass each, then it's pretty simple:
$(document).ready(function() {
$(".bbsa-h, .cscs-h, .dorbus-h").hover(function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 0);
}, function () {
$(this).find(".bbsa, .cscs, .dorbus").stop().fadeTo(250, 1);
});
});
If they have multiple subclasses, you'll have to first check which class the current div belongs to and build the selector based on it.