递增地调用Jquery函数。

Question

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

每次我插入div，它都能工作。但第二次，插入两个div，第三个div，等等。

我不知道我做错了什么，我猜这和函数的重新连接有关。尝试在许多地方使用.off()，但是没有工作，委派click事件也不起作用。为了保持可读性，我把它删掉了。

任何提示或指示都是非常感谢的！

在页面加载时调用：

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 tools)

<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>

Answer 1

$('.widgets-modal form').submit( function(){...是增量式的。它在每次单击时都附加相同的函数。因此，如果单击三次，.submit函数将附加并执行三次。尝试在.unbind()之前添加.submit，以清除之前附加的所有函数。