克隆插入僅插入一次後

Question

我想克隆一些html輸入的元素。如果我在添加按鈕上單擊事件之前克隆元素，它只會插入一次。但是，如果我在點擊事件中克隆它，它會根據需要插入多次。

這是工作：

$(document).on('pwpusscformopenraw', function() { 

    $('.pwpus-repeat-wrapper').each(function() { 
     $(this).find('.add-emls').each(function() { 
      $(this).on('click', function() { 
       var cloned = $(this).parent().siblings('.pwpus-sortable-ul').find('.tbcloned').clone(false); 
       cloned.removeClass('tbcloned'); 
       cloned.insertAfter($(this).parent().siblings('.pwpus-sortable-ul').find('li:last-child')); 
       console.log(cloned); 
       $(document).trigger('pwpusrpfo'); 
      }); 
     }); 
    }); 
}); 

然而，這是工作僅做一次只有兩個克隆的實例。

$(document).on('pwpusscformopenraw', function() { 

    $('.pwpus-repeat-wrapper').each(function() { 
     var cloned = $(this).find('.tbcloned').clone(false); 
     $(this).find('.add-emls').each(function() { 
      $(this).on('click', function() { 
       cloned.removeClass('tbcloned'); 
       cloned.insertAfter($(this).parent().siblings('.pwpus-sortable-ul').find('li:last-child')); 
       console.log(cloned); 
       $(document).trigger('pwpusrpfo'); 
      }); 
     }); 
    }); 
}); 

我需要它的單擊事件之前，因爲有連接到我不想克隆元素上應用相同的單擊事件其他一些功能被克隆。

我做錯了什麼？

Answer 1

嘗試以下操作：

$(document).on('pwpusscformopenraw', function() { 
     $('.add-emls').addClass('triggered');//add a class to trigger the click event 
    }); 
    $('body').on('click','.triggered',function(){ 
     var cloned = $(this).closest('.pwpus-repeat-wrapper').find('.tbcloned').clone(false); 
      cloned.removeClass('tbcloned'); 
        cloned.insertAfter($(this).parent().siblings('.pwpus-sortable-ul').find('li:last-child')); 
        $(this).removeClass('tbcloned');//to reset the "pwpusscformopenraw" event 
        $(document).trigger('pwpusrpfo'); 
    });