Grow your CSS skills. Land your dream job.

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.
    CODE:
    http://codepen.io/sayed2x2/pen/czybt

    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.
    Thanks.

    # April 4, 2013 at 6:42 am

    var singleData = $(‘#main’).html();
    $(document).on(‘click’, ‘.replicate’, function() {
    $(‘#main’).append(singleData);
    });

    # April 4, 2013 at 6:50 am

    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:

    [http://api.jquery.com/on/](http://api.jquery.com/on/ “.on()”)

    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.

*May or may not contain any actual "CSS" or "Tricks".