Функция Jquery называется incremently

Question

Я, вероятно, делаю огромную ошибку в способе, которым я занимаюсь, и, вероятно, поэтому эта ошибка возникает; У меня есть пустой div в iframe. При щелчке div будет заменен содержимым. Пока я добавляю содержимое, div также должен быть вставлен перед вставленным div.

Каждый раз, когда я вставляю div, он работает. Но второй раз, два divs вставлены, третий три и так далее.

Я не уверен, что я делаю неправильно, я предполагаю, что это имеет какое-то отношение к повторной привязке функции. Пробовал использовать .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-инструменты)

<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, чтобы удалить все предыдущие функции.