Jquery函数被增量调用

我可能在做事的方式上犯了一个巨大的错误，这可能就是为什么会发生这个错误；我在iframe中有一个空div。单击后，div将替换为内容。在添加内容时，还需要在插入的div之前插入带有工具的div

每次我插入div时，它都会工作。但第二次插入两个div，第三次插入三个div，依此类推

我不确定我做错了什么，我猜这与函数的重新连接有关。在很多地方都尝试过使用.off，但都不起作用，授权单击事件也不起作用。我把它删去以保持可读性

非常感谢任何提示或指点

在页面加载时调用：

if($('#page-editor').length >= 1)
{
    // If iframe is done loading
    $(pageEditor).on('load', function (e)
    {
        // Check if iframe has contents
        if($(pageEditor).contents())
        {
            // Click event for empty div
            widgetClickEvent($(pageEditor).contents().find('#content .row[data-widget="empty"][data-editable="true"]'));
        }
    });
}

单击事件函数

function widgetClickEvent(attach)
    {
        // Click event
        $(attach).on('click', function(e)
        {
            // Get Id
            selectedRow = '#' + $(this).attr('id');

            // On submit of form
            $('.widgets-modal form').submit(function(e)
            {
                // Add widget
            addWidget(selectedRow, data, dataWidget);
            });
        });
    }

以及添加小部件的代码

function addWidget(selectedRow, data, dataWidget)
{
    // Insert html in the selected div
    $(pageEditor).contents().find(selectedRow).html(data).attr('data-widget', dataWidget).attr('data-editable', 'false').before(addWidgetTools(pageEditor, 'tools-' + selectedRow.substr(1))).off();
}

上述其他职能

// Add empty widget
function addEmptyWidgetHtml()
{
    var id = Math.floor((Math.random() * 1000000) + 1);
    $('#page-editor').contents().find('#content .row').each(function(e)
    {
        if($(this).attr('id') === id)
        {
            var id = Math.floor((Math.random() * 1000000) + 1);
        }
    });
    var html = '<div class="row" data-editable="true" data-widget="empty" id="' + id + '"><i class="fa fa-plus-circle"></i></div>';
    return html;
}

// Add widget tools html
function addWidgetTools(pageEditor, id)
{
    return '<div class="row widget-tools" id="' + id + '"><i class="fa fa-pencil"></i><i class="fa fa-arrows"></i><i class="fa fa-times"></i></div>';
}

三次点击后，我的代码看起来是这样的，注意.widget工具

<div class="row" data-editable="true" data-widget="empty" id="467645"></div>
<div class="row widget-tools" id="tools-135480"></div>
<div class="row" data-editable="false" data-widget="text" id="135480"></div>
<div class="row widget-tools" id="tools-700883"></div>
<div class="row widget-tools" id="tools-700883"></div>
<div class="row" data-editable="false" data-widget="blockquote" id="700883"></div>
<div class="row widget-tools" id="tools-607461"></div>
<div class="row widget-tools" id="tools-607461"></div>
<div class="row widget-tools" id="tools-607461"></div>
<div class="row" data-editable="false" data-widget="text" id="607461"></div>

以及我需要它的外观：

<div class="row" data-editable="true" data-widget="empty" id="467645"></div>
<div class="row widget-tools" id="tools-135480"></div>
<div class="row" data-editable="false" data-widget="text" id="135480"></div>
<div class="row widget-tools" id="tools-700883"></div>
<div class="row" data-editable="false" data-widget="blockquote" id="700883"></div>
<div class="row widget-tools" id="tools-607461"></div>
<div class="row" data-editable="false" data-widget="text" id="607461"></div>

---

$'.widgets模式表单'.submit函数{…是增量函数。它在每次单击时都会附加相同的函数。因此，如果单击三次，.submit函数将被附加并执行三次。请尝试在.submit之前添加.unbind，以清除以前附加的所有函数。

这是在另一个事件处理程序的上下文中绑定事件处理程序时得到的结果。$'“.提交功能{…是增量的。它在每次单击时都会附加相同的函数。因此，如果单击三次，.submit函数将被附加并执行三次。请尝试在之前添加.unbind.submit，以清除以前附加的所有函数。关于：@JeremyThille；成功了！谢谢！@Vohuman；如果您有关于我如何执行此操作的建议或建议，请告诉我更好，拜托！@Sam；我试过了，可能是在错误的地方，但效果不好，我已经添加了它作为正式答案。如果你认为可以，请验证它：我想添加我使用的。off，而不是。unbind，因为它是不推荐的。真的吗？我在文档中没有看到任何地方不推荐使用unbind。off用于清除一个元素中的特殊事件，如.off'click'，但unbind会删除所有内容。我想我在某个地方读到过，但正如你所说，它不在文档中。我会将其更改为unbind！