javascript - jQuery - 为什么当我单击一个图标时会附加 2 个元素

Question

我在这里创建了一个 JSfiddle:

基本上我有一个允许用户输入额外部分的表单...但是当我添加了超过 2 个单元然后继续单击“加号”(+) 图标时，我得到了超过 1 个元素创建于该部分...它可能是一些基本内容，但任何信息都会有所帮助。

Answer 1

将您的点击功能移出点击功能

//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>");

    });
});

这里我将点击处理程序绑定(bind)到 Document，因为元素尚不存在:您也可以在创建实际元素时添加事件监听器。

修改后的 fiddle :http://jsfiddle.net/vewP7/