1

I try to add functionality to allow user to edit the values of a table, either by adding/deleting/modifying the table and its data.

I've managed to get it to do what I want but the text I want to append gets appended 4 times and I'm not wise enough to understand why.

I've set up demo here http://jsfiddle.net/a973/CWQh9/1

and this is the code fired

$('#saveBtn').live("click", function(){
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();

    $(".itms").fadeOut("normal", function() {
            $(this).remove();

            $('#comp').append(txt);
            $('#orgn').append(txt2);
            $('#nextLast').append('<a href="#">change</a>')
            $('#lastTd').append("<a href='#'>erase</a>");

    });

Can anyone help me get rid of the 3 extra instances of texts?

The final result will only be used for demoing/prototype purposes.

3
  • Try create this as a JSFiddle Mar 25, 2013 at 16:33
  • Should probably convert live() to on() while you're at it. Looks like an effortless direct swap in this case.
    – isherwood
    Mar 25, 2013 at 16:37
  • @Rick Donohoe, I've included a jsfiddle link in the original post. Mar 25, 2013 at 17:00

5 Answers 5

1

That is because the handler is called for each of your ".itms". So each time the append() function is called.

I added what you were asking for in the comments below.

New solution: Fiddle

Do it like that:

$('#saveBtn').live("click", function () {
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();
    //$('#compName, #orgnr, #saveBtn, #cncl').remove();

    setTimeout( function() {
        $('#comp').append(txt);
    $('#orgn').append(txt2);
    $('#nextLast').append('<a href="#">change</a>')
    $('#lastTd').append("<a href='#'>erase</a>");
    }, 500);

    $(".itms").fadeOut("normal", function () {
        $(this).remove();
    });
    $('#raden').effect("highlight", {}, 1000);
});
0
1

I'm guessing the $('.itms') selector is matching four elements on the page. Therefore the callback function is being called four times. That means the call to append is happening four times.

1

Move these four lines outside of the fadeOut call:

$('#comp').append(txt);
$('#orgn').append(txt2);
$('#nextLast').append('<a href="#">change</a>')
$('#lastTd').append("<a href='#'>erase</a>");

So you get this:

$('#saveBtn').live("click", function () {
    var txt = $("#compName").val();
    var txt2 = $("#orgnr").val();
    $('#comp').append(txt);
    $('#orgn').append(txt2);
    $('#nextLast').append('<a href="#">change</a>')
    $('#lastTd').append("<a href='#'>erase</a>");
    $(".itms").fadeOut("normal", function () {
        $(this).remove();
    });
})

Otherwise your appends are called several times, once per each .itms.

jsFiddle example (note that i also updated your .live() to .on() since live has been deprecated.

1
  • thanks, I've tried that but that makes the text append before the items are faded out and that is not the effect I want. Basically I just want the input fields to fade away and their values should remain as saved data, and then replace the cancel and save buttons with an erase and a modify link. Mar 25, 2013 at 17:04
0

Most probable cause is that there are four elements with the css class .itms and hence the callback fired four times. As I see the code, there are four td s which are present in the table and hence this is fired four times

0

Because there are multiple elements that match your selector, the function gets called multiple times. Try doing it on a clicked element.

 $(".itms").click().fadeOut("normal", function() {

            $(this).remove();

            $('#comp').append(txt);
            $('#orgn').append(txt2);
            $('#nextLast').append('<a href="#">change</a>')
            $('#lastTd').append("<a href='#'>erase</a>");


    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.