Problem in adding input with similar class

Question

I have a problem adding an input with similar class(addinput_units).

In the example when you click on the "add" link next to "field 1", it adds a new input following "field 2" with value "field 1".

How can I add a new field following the input nearest to the "add" link with a similar class(addinput_units) in HTML?

EXAMPLE: http://jsfiddle.net/FpsPh/

$(function () {
    $('a.add_input').live('click', function (event) {
        event.preventDefault();
        var $class = '.' + $(this).closest('div.find_input').find('div').attr('class').split(" ")[0];
        var newDiv = $($(this).closest($class).get(0)).clone(false);
        $(this).closest($class).find('.add_input:first').remove()
        newDiv.hide().fadeIn('slow');
        $($class + ':last').after(newDiv);
    });
});

EDITE:

this is the original my code that not work true. see you: http://jsfiddle.net/FpsPh/4/

jmar777 · Accepted Answer · 2011-09-10 14:13:01Z

2

I'm not 100% sure I understood the question, but is this what you're going for?

$(function () {
    $('a.add_input').live('click', function (event) {
        event.preventDefault();
        var $this = $(this),
            $div = $this.closest('div'),
            $clone = $div.clone().hide()
                .insertAfter($div).fadeIn('slow');
        $this.remove();
    });
});

Here's the updated jsFiddle.

answered Sep 10, 2011 at 14:13

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jennifer Anthony Over a year ago

this is the original my code that not work true. see you: jsfiddle.net/FpsPh/4

jmar777 Over a year ago

I've updated your jsfiddle with my JavaScript (jsfiddle.net/FpsPh/5), and it still works the way I'm expecting. If this is not the behavior you want, can you try to explain the desired behavior again? I had trouble understanding your initial question.

Dennis · Accepted Answer · 2011-09-10 14:14:03Z

1

Your problem is that you are selecting the last addinput_units div in the document, not the one in the correct td. Use closest:

$('a.add_input').live('click', function (event) {
    event.preventDefault();
    var $class = '.' + $(this).closest('div.find_input').find('div').attr('class').split(" ")[0];
    var newDiv = $(this).closest($class).clone(false);
    newDiv.hide().fadeIn('slow');
    $(this).closest($class).append(newDiv).find('.add_input:first').remove()
});

You also don't need to call get(0) on the closest - it will only ever return one element.

Demo: http://jsfiddle.net/FpsPh/2/

answered Sep 10, 2011 at 14:14

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

1 Comment

Jennifer Anthony Over a year ago

this in the original my code not work true. see you: jsfiddle.net/FpsPh/4

casraf · Accepted Answer · 2011-09-10 14:08:49Z

0

Try using prev() instead of closest()? Or maybe a different method of finding the element. Maybe matching an ID to it and changing the link's ID, try playing around with different types of ways to find the element you want to clone.

answered Sep 10, 2011 at 14:08

casraf

21.8k10 gold badges60 silver badges93 bronze badges

1 Comment

Jennifer Anthony Over a year ago

this is the original my code that not work true. see you: jsfiddle.net/FpsPh/4

Collectives™ on Stack Overflow

Problem in adding input with similar class

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related