jQuery-为什么单击图标时会添加2个元素

Question

I've created a JSfiddle here:

basically I have a form that will allow users to input additional sections... but when I have added more than 2 units and then proceed to click on the 'plus' (+) icon I get more than 1 element created in that section... its probably something elementary, but any info will help.

Answer 1

Move your Click functions out of the click function

//add unit input box and increment click counter by one. 
addUnit.click(function () {

    unitCounter += 1;

    unitElementCount = jQuery(".unit-element").length;

    if (unitCounter <= 4) {
        error.hide();
        container.append('<table id="unit-' + unitCounter + '-div" class="create-course-table-element unit-element"><tr><td><label class="unit-label">Unit ' + unitCounter + '</label></td><td><input class="create-course-input-element unit-input" id="unit-id-' + unitCounter + '" name="unit-' + unitCounter + '" /><div id="delete-unit-' + unitCounter + '" class="ui-icon ui-icon-circle-close del-unit" title="Delete unit"></div></td></tr><tr><td align="center">Sections</td><td><div id="add-section-icon-' + unitCounter + '" class="ui-icon ui-icon-plus add-section-icon"></div></td></tr></table><div id="section-id-' + unitCounter + '-div" class="this-section"></div>');
    } else if (unitElementCount == 4) {
        unitCounter = 5;
        error.html("");
        error.fadeIn(1500);
        error.append("<p class='error-message'>Note: You are only able to add 4 units to a given course. Each unit allows you to add 10 separate sections of content; therefore you may add a total of 40 different sections to a given course. If the material requires more units, you should consider dividing the course into 2 parts.</p>");
    }

});
    //This part has been slightly modified and moved out of the addUnit.click() function
    var counterSecTwo = 0;
    var counterSecThree = 0;
    var counterSecFour = 0;

    jQuery(document).on("click", "#add-section-icon-2",function () {

        counterSecTwo += 1;
        var container = jQuery("#section-id-2-div");
    container.append("<p>test "+counterSecTwo+"</p>");

    });

    jQuery(document).on("click", "#add-section-icon-3",function () {

        counterSecThree += 1;
        var container = jQuery("#section-id-3-div");
    container.append("<p>test "+counterSecThree+"</p>");

    });

    jQuery(document).on("click", "#add-section-icon-4",function () {

        counterSecFour += 1;
        var container = jQuery("#section-id-4-div");
    container.append("<p>test "+counterSecFour+"</p>");

    });
});

Here I am binding the click handlers to Document as the elements do not exist yet: you could also add the event listener when you create the actual element.

Modified fiddle: http://jsfiddle.net/vewP7/