Posts

Showing posts from February, 2013

Adding Fields(block) Using jQuery clone()

jQuery clone() creates a copy of matched element. It comes in handy since it does not only creates a copy of matched elements but also, all of their descendant elements and text nodes.
Hello World Result
Hello
World World The above code creates a clone of div with class as world and appends it to div with class hello.
Using clone(), we can create "Add more" without using any external js files or plugins
FULL CODE
HTML
Name:Price Add More +
CSS
.close{ cursor:pointer; }
JQUERY
Try It In FIDDLE Yourself

Jquery 'On' (Events,Direct ,Delegated)

jQuery makes it easy to respond to user interaction with a web page. Example, this code listen to click event on all element in a document and alert the text in it.

HTML
click 1 click 2 JQUERY
There are other methods for event binding such as click(), keydown(), keyup(), blur() and so on, all of which make use of jQuery's .on() method.
jQuery's .on() method attachs an event handler function for one or more events on selected elements.

The example given above is Direct event. which basically means :
HEY!!!! I want every div to listen up: when you get clicked , give me alert.

Here, each of these div has been individually given click event which works as it should.

However  if you notice in jquery's DOC,
According to the jquery's documentation:
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

so, now what if some of the div is generated dynamically.For example.
Looking at the code, t…