Develop Reference

Add Event listener using Jquery

I am creating a clone of a div, but unfortunately i am not able to add event listener to cloned div.
I tried using clone(true,true) but still did not get it running.
Can some one help me out with it please
JS fiddle for clone
Clicking image next to And, adds a new div
Code i tried for adding event listener
$("#add").on('click',function () {
$("#cont").clone(true, true).appendTo(".container");
});

First you should change your cont id to a class as multiple ids are bad and won't work properly.
Second, use jQuery's first method to grab the first in the returned jQuery nodelist that you get from grabbing all the cont classes: $('.cont') and then clone the node. You have to grab only the first one or you'll end up adding multiples of the div back on to the page.
$(".cont").first().clone(true, true).appendTo(".container");
Third, change the delete id to a class.
Fourth, because you're adding to the DOM you need to use event delegation on the parent node in order to catch the events properly. Use closest to find the nearest cont class and remove it.
$('.container').on('click', '.delete', function () {
$(this).closest('.cont').hide();
});
Fiddle
Hope this helps.

How to copy a div and its content, and append it somewhere else but keep original hidden

I have a div element like:
<div id="abc">....</div>
It is hidden or display:none by default on page load.
I know want to append this div and its content somewhere else, and make it visible, but the original should remain not visible (or I can remove it).
How can I do this?
I'm currently appending it but it is showing up in 2 places.

Take the HTML from your hidden div and append it to your target using .html() and .append()
var html = $('div.hidden-div').html();
$('div.target-div').append(html);
To show the target div then remove the old one, do the following:
$('div.target-div').show();
$('div.hidden-div').remove();

Deep clone, append, remove id attribute and show.
​​$("div#abc")
.clone()
.appendTo("div#other")
.removeAttr("id")
.show();​​​​​​
Remove or modify your id attribute, having multiple elements with same id is troublesome. If you happen to use CSS classes you could also use it this way:
.template {
display: none;
}
​​$("div.template")
.clone()
.appendTo("div#other")
.removeClass("template");​​​​​​

If it is OK to remove it (as you said), just append it to the other element. The element will automatically be removed from the first place and never show up there.
$("#abc").appendTo(place2).show();

Modifying all element in a class with js

I am trying to hide/show a class of elements in a form depending on a drop-down menu choice made by the user. See: http://jsfiddle.net/3FmHK/2/
I am new to js and have two problems, so maybe they are obvious, bear with me.
1) I am modifying by the div id, so only the first element changes (and not in this fiddle for some reason, but it does in the project). However I want all the elements of a class to modify and I haven't been able to make that work. So how do I modify the style="display" for an entire class, rather than a single element?
2) The remove does not work for newly added element, when the form is returned with values in the project, they are removable. Using firebug, the code looks identical for the GET return generated elements vs the user added elements, as far as I can tell. Why does the remove function not work for newly added elements?

I recommend using jQuery for this if you can. You can use the .on() feature to bind actions ot newly created elements and use the class selector to .hide() all classes then .show() the currently selected on by id.
It would look something like this:
jQuery(document).ready( function() {
jQuery(document).on('click', '.classname', function() {
jQuery('.' + jQuery(this).attr('class') ).hide();
jQuery(this).show();
// Or you can use the following to show a specific ID element.
//jQuery('#idtoshow').show();
)};
});
This will hide all elements with the class name. You will need to include the jQuery library before your script. Although I am only using show and hide here, you can use .remove() as long as you bind your action with .on and not just .click. You need .on to bind to newly created elements.
http://api.jquery.com/on/
Hope this helps.

Try:
$(this).parent('div').first().remove();

Clone a div and then clone again from the child

I have the following simple code, where I double click a div (with class container) and it's simply clones itself inside another div (with id containment-wrapper):
html
<span class="container">div one</span>
<div id="containment-wrapper">
</div>
Jquery
$(".container").dblclick(function() {
$(this).clone().appendTo('#containment-wrapper');
});
When I double click the original div, it clones itself and puts a div inside the containment-wrapper but when I double click a cloned div, it doesn't do anything even though it has class=container, why is this happening? I tried many different ways to clone it but nothing worked.

It's because the event handler isn't cloned. Use delegate instead:
$(".container").delegate("","dblclick",function() {
$(this).clone().appendTo('#containment-wrapper');
});

Because dblclick is not bounded to the new div. What you want to achieve can be easily done with live
$(".container").live('dblclick', function() {
$(this).clone().appendTo('#containment-wrapper');
});

Since you're dynamically adding div tags they aren't automatically bound to the .dblclick function you've specified. Using a live event handler is one way to solve this.

Adding, Removing and Adding Element again removes its Event

I have a hyperlink with an ID when clicked will perform a certain event using JQuery. JQuery records the existence of this link on document load. Some time during the course of the users visit. I remove that link and the re-add it later. However, that even is not fired off again when that link is clicked after it has been removed and added.
Why is the case and how can I remedy it? Something to do with event binding?? Or shall I just add an onclick attribute?

You've been using a tag like this to add the click event:
$('#speciallink').click(function(){
// do something
return false;
});
This will bind the event to the elements that are selected at that moment.
Removing a link and adding it again, will effectively create a new element, without this event. You can use the "live" method to add rules that will be applied to events matching the rule, even when these elements are created after creating the rule:
$('#speciallink').live("click",function(){
// do something
return false;
});

You will need to bind that event handler to the new element when it is added or you could use live() instead of bind to achieve what you need.
Basically, the event handler references the original element. When that element is removed, even though a new element is added with the same id, it is a different element.

Don't remove the link from the DOM tree. Instead, just toggle its visibility with show() and hide().
Removing the element from the DOM tree with remove() will remove the element and all of its event handlers, even if you add it back with the same id.

If you completely remove the element, you will need to reattach any event listeners to the element when you recreate it.
Alternatively, just hide the element by setting its style to display:none with .show() and .hide()