2015-07-19 68 views
-1

我只是想克隆和插入這個克隆的右手邊的按鈕。如何克隆div和插入按鈕?

我的JavaScript看起來像這樣:

$('.frame .portlet').click(function (e) { 


     if ($(e.target).is(".portlet-content") || $(e.target).is(".portlet-header")) { 
      cancel: 'ui-icon-minusthick ui-icon-plusthick'; 
      var $this = $(this), $error; 

      // for duplicate 
      if ($this.hasClass('added') && !$this.hasClass('newPortlet')) { 
       $error = $this.next('.clone-error'); 
       if (!$error.length) { 
        $error = $('<span />', { 
         'class': 'clone-error', 
         html: '<div class="alert alert-warning" role="alert" style="width: 300px"> This question is already added!</div>' 
        }).insertAfter(this); 
       } 
       $error.stop().show().delay(800).hide(1); 
      } else if (!$this.hasClass('newPortlet')) { 
       $this.addClass('added').clone(document.getElementById(this.id)).addClass('newPortlet').("<button>hi</button>").appendTo('#creation .newFrame'); 

       $msg = $('<span />', { html: '<div class="alert alert-success" role="alert" style="width: 300px"> This question is added to Add List!</div>' }).insertAfter(this); 
       $msg.stop().show().delay(800).hide(1); 
       count++; 
       add.html("<span id='newExam' class='badge' style='background-color: lightgreen; border-color: green'>" + count + "</span>"); 
      } 

     } 
    }); 

我希望它是這樣的:

enter image description here

+0

請提供給我們多一點的代碼(HTML),甚至一個的jsfiddle鏈接,以便我們可以幫助你更好;) – nstungcom

+0

我認爲你可以做到這一點很簡單,我建議你,不要混用'純js'和'jQuery'。 jsfiddle鏈接將會有用 –

+0

'clone(document.getElementById(this.id)=== clone(this)' – charlietfl

回答

0

您可以存儲到克隆的對象的引用....然後操作這些通過附加到它的對象。

變化:

$this.addClass('added').clone(document.getElementById(this.id)) 
     .addClass('newPortlet').appendTo('#creation .newFrame'); 

要:

// create clone object 
    var $clone = $this.addClass('added').clone(this); 
    // now can append to clone 
    $clone.append('<button>TEST</button>'); 
    // then insert clone to dom   
    $clone.addClass('newPortlet').appendTo('#creation .newFrame'); 

通過創建可變它使得它更容易閱讀和看各個步驟的對象。我覺得你的主要問題,只是有很多步驟鏈,使邏輯易於遵循

DEMO