The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to replicate buttons in jQuery?

  • # April 4, 2013 at 6:08 am

    Hi, I m learning jquery , and I m stuck at a point.
    I m trying to create a form for my practice and I want the fields to replicate itself when a + button is clicked but instead of showing the whole code I m just going to ask the part where I m having problem.

    So here is the question,
    I want the buttons to replicate itself when clicked. However only the first button is producing buttons but I wanted all the buttons to do the same thing.

    I have written the function on CLICK of ‘replicate’ class , and when the first button produces buttons they also have the same class ‘replicate’ applied to them. Then why is this function not working on them but only working for the first button?
    I was looking more for an explanation than a solution. Please help.

    # April 4, 2013 at 6:42 am

    This reply has been reported for inappropriate content.

    var singleData = $('#main').html();<br />

    $(document).on(‘click’, ‘.replicate’, function() {

    # April 4, 2013 at 6:50 am

    This reply has been reported for inappropriate content.

    Sorry – explanation:

    Event handlers aren’t replicated when you duplicate an object. You need instead to have a method that either binds it explicitly, or (as in this case) uses a “delegated events” approach.

    What that means is that the event is bound to an element higher up than what is actually being acted on. In this case, document. Events “bubble” up the DOM, so this can handle new elements being added.

    I recommend reading the jQuery documentation for more information:

    It’s well worth becoming more familiar with jQuery, especially since you are using the library anyway.

    # April 4, 2013 at 6:55 am

    Thanks , that was really helpfull. Now I undertand.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed