我的新HTML元素正在以指数率创建WTF Javascript和jQuery

Question

Hope you are all doing well. I seem to have a bit of a problem with my code and I was hoping you'd be able to assist. Every time I run the contmgr_create_media in conjunction with the contmgr_update_order functions as I do in with the add image button, I get new items created but in an exponential fashion (1, 2, 4, 8, 16). If I do not fire the contmgr_update_order function when the add image button is clicked it works as it should. Any suggestions? Thanks for your time and the code is below.

Code:
    jQuery(function() {
        contmgr_update_order();
        jQuery('#contmgr-sortable').sortable({
            update: function(event, ui) { contmgr_update_order(); }
        });
        jQuery('#contmgr-sortable').disableSelection();

        //this function deletes media elements by using the jQuery commant .remove
        function contmgr_delete_media() {
            jQuery('.contmgr-delete').click( function () {
            jQuery(this).parents('.ui-state-default').remove();
            contmgr_update_order();
            });
        };
        //this function updates the feedback for the user as to how the media elements are ordered
        //it also inserts / updates an id for each element ensuring that that specific element can
        //be called at a later point in time
        function contmgr_update_order(){
            jQuery('.contmgr-media-element').each( function(index) {
                jQuery(this).find('.contmgr-media-order').html(index);
                jQuery(this).find('.contmgr-media-order').attr('id', index);
            });

        var new_media_element = '<li class="ui-state-default contmgr-media-element"><span class="contmgr-media-title-span"><div class="contmgr-media-title">Really Long Title</div></span><div class="contmgr-media-content"><span class="contmgr-media-order"></span><span class="contmgr-media-control-span"><a class="button contmgr-media-buttons">Edit</a><a class="button contmgr-media-buttons contmgr-delete">Delete</a></span></div></li>';

        function contmgr_create_media(){
            jQuery('#contmgr-sortable').append(new_media_element);
            };

        //this function fires here to ensure that all of the delete buttons on the media elements
        //are functioning and listening for that click
        contmgr_delete_media();


        jQuery('#contmgr-add-image').click( function () {
            contmgr_create_media();
            contmgr_update_order();
            contmgr_delete_media();
        });
        };

    });

Answer 1

Every time you're calling

jQuery('#contmgr-add-image').click( function () {
        contmgr_create_media();
        contmgr_update_order();
        contmgr_delete_media();
    });

You bind another trigger. Try to unbind click before .click() , or try to use .live('click', function(e) {}) . If you use second, any new element with given selector will automatically with click trigger.