Question

我可能在我做事的方式上犯了很大的错误，这可能就是为什么会出现这种错误;我在iframe中有一个空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，以清除之前附加的所有功能。

Jquery函数以递增方式调用

1 个答案: